Skip to content

Commit

Permalink
release 2.3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@eliasliedholm
eliasliedholm committed May 11, 2017
2 parents f488b4a + 3d26bee commit 2528c6b
Show file tree
Hide file tree
Showing 63 changed files with 8,834 additions and 577 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Thumbs.db
ehthumbs.db
Desktop.ini
$RECYCLE.BIN/
tags

# App specific

Expand Down
2 changes: 2 additions & 0 deletions .npmrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
; fixed version dependencies to ensure a reproducible build
save-exact = true
14 changes: 11 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Styla Widget 2.2.0
Styla Widget 2.3.0

=======

Expand Down Expand Up @@ -124,16 +124,21 @@ Animated GIFs will be displayed as still images to reduce loading time and the
impact on performance of a client website.


dev installation
Dev installation
----------------

```
git clone git@github.com:styladev/widget.git
cd widget
npm i
npm install
npm run build
python -m SimpleHTTPServer [port]
```

then, find a demo page at `localhost:8000/dist/stage.html`

To stop the server, press CTRL-C


Releasing
--------
Expand Down Expand Up @@ -172,6 +177,9 @@ This project adheres to the [Contributor Covenant](http://contributor-covenant.o

Change log
==========
### 2.3.0
+ images render as background images on the image wrapper element as a fallback for Internet Explorer

### 2.2.0
+ truncate text after 220 characters
+ replace h3 tags with spans for headlines
Expand Down
117 changes: 117 additions & 0 deletions build/css/baseStyles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
#styla-widget p
{
margin: 0;
}


#styla-widget.styla-widget__wrapper
{
width: 100%;
height: 100%;
}


#styla-widget .styla-widget__container
{
box-sizing: border-box;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
min-height: 14em;
font-size: 14px;
}


#styla-widget .styla-widget__story
{
margin-bottom: 1em;
position: relative;
}


#styla-widget .styla-widget__link
{
position: absolute;
width: 100%;
/* stylelint-disable */
display: -moz-flex;
display: -webkit-flex;
display: flex;
/* stylelint-enable */
text-decoration: none;
color: inherit;
}


#styla-widget__link > div
{
display: inline-block;
}

#styla-widget .styla-widget__imagewrap
{
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
}

#styla-widget .styla-widget__image
{
max-height: 100%;
max-width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
}


#styla-widget .styla-widget__textwrap
{
display: block;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
max-height: 100%;
overflow: hidden;
float: left;
}


#styla-widget .styla-widget__headlinewrap
{
display: flex;
flex-direction: column;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}


#styla-widget .styla-widget__headline,
#styla-widget .styla-widget__title
{
line-height: 1.25em;
max-height: 2.5em;
overflow: hidden;
margin-top: 1em;
margin-bottom: 1em;
}


#styla-widget .styla-widget__title
{
font-size: 2em;
text-align: center;
margin-bottom: 30px;
}


#styla-widget .styla-widget__paragraph
{
font-size: 1em;
line-height: 1.5em;
overflow: hidden;
position: relative;
word-wrap: break-word;
}
1 change: 1 addition & 0 deletions build/css/baseStyles.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

79 changes: 79 additions & 0 deletions build/css/cards.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
#styla-widget.cards .styla-widget__container
{
/* stylelint-disable */
display: -moz-flex;
display: -ms-flex;
display: -webkit-flex;
display: flex;
/* stylelint-enable */
-moz-flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

padding: 0 0.5em;
height: 26em;

overflow: hidden;
}

#styla-widget.cards .styla-widget__story
{
margin: 0.5em;
width: 18em;
height: 25em;
display: block;
float: left;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}

#styla-widget.cards .styla-widget__link
{
display: block;
}

#styla-widget.cards .styla-widget__imagewrap
{
height: 11em;
width: 100%;
background-size: cover;
}

#styla-widget.cards .styla-widget__image
{
width: 100%;
object-fit: cover;
}

#styla-widget.cards .styla-widget__textwrap
{
width: 100%;
}

#styla-widget.cards .styla-widget__headline
{
font-size: 1.5em;
}

#styla-widget.cards .styla-widget__paragraph
{
max-height: 6em;
}

#styla-widget.cards .styla-widget__calltoaction
{
line-height: 2em;
}

#styla-widget.cards .styla-widget__calltoaction:hover
{
text-decoration: underline;
}
1 change: 1 addition & 0 deletions build/css/cards.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

129 changes: 129 additions & 0 deletions build/css/horizontal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
#styla-widget.horizontal .styla-widget__container
{
padding: 1em;
/* stylelint-disable */
display: -moz-flex;
display: -ms-flex;
display: -webkit-flex;
display: flex;
/* stylelint-enable */
-moz-flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

height: 16em;
}

#styla-widget.horizontal .styla-widget__story
{

margin: 0 2em 1em;
height: 14em;
width: 24em;
display: block;
float: left;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}

#styla-widget.horizontal .styla-widget__link
{
height: 14em;
top: 50%;
margin-top: -7em;
align-items: center;
}

#styla-widget.horizontal .styla-widget__imagewrap
{
display: block;
-moz-flex-grow: 1;
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
height: 100%;
margin: 0 6% 0 0;
-moz-flex: none;
-ms-flex: none;
-webkit-flex: none;
flex: none;
max-width: 40%;
float: left;
}

#styla-widget.horizontal .styla-widget__textwrap
{
display: block;
max-height: 100%;
overflow: hidden;
float: left;
}

#styla-widget.horizontal .styla-widget__headlinewrap
{
height: 5em;
/* stylelint-disable */
display: -moz-flex;
display: -ms-flex;
display: -webkit-flex;
display: flex;
/* stylelint-enable */
-moz-flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}

#styla-widget.horizontal .styla-widget__headline
{
font-size: 1.9em;
line-height: 1.25em;
max-height: 2.5em;
overflow: hidden;
margin: 0;
margin-bottom: 0.25em;
word-wrap: break-word;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

#styla-widget.horizontal .styla-widget__paragraph
{
font-size: 1em;
line-height: 1.5em;
max-height: 7.5em;
overflow: hidden;
position: relative;
word-wrap: break-word;
}

#styla-widget.horizontal .styla-widget__paragraph-after
{
line-height: 1.5em;
}

/* Multiple paragraphs causes issues when truncating the text */
#styla-widget.horizontal .styla-widget__paragraph p + p
{
display: none;
}

/* This design has no support for call to action */
#styla-widget.horizontal .styla-widget__calltoaction
{
display: none;
}
1 change: 1 addition & 0 deletions build/css/horizontal.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 2528c6b

Please sign in to comment.