richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Tweaking feed styles and redoing docs

pull/1063/head
jlukic 10 years ago
parent
43725695b3
commit
a8ec470553
11 changed files with 317 additions and 152 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      RELEASE NOTES.md
  2. 285
      server/documents/views/feed.html.eco
  3. BIN
      server/files/images/animals/2035_m3.jpg
  4. BIN
      server/files/images/animals/2036_m3.jpg
  5. BIN
      server/files/images/animals/2041_m3.jpg
  6. BIN
      server/files/images/animals/2043_m3.jpg
  7. 1
      server/files/stylesheets/semantic.css
  8. 71
      src/definitions/elements/header.less
  9. 35
      src/definitions/views/feed.less
  10. 27
      src/themes/packages/default/globals/site.variables
  11. 49
      src/themes/packages/default/views/feed.variables

1
RELEASE NOTES.md
View File

@ -29,6 +29,7 @@
- **Grid** - Elements inside a grid that are not rows or columns will now align properly
- **Grid** - Fixed page grid allows for fixed pixel size containers used with a grid instead of percentage
- **Grid** - Vertically divided grid now does not include left/right gutters in divider
- **Header** - Linked headers now receive link colors
- **Image** - New ``bordered image`` variation
- **Item** - Items now have a horizontal list view for content lists
- **Label** - Added tag label and empty circular label style

285
server/documents/views/feed.html.eco
View File

@ -29,28 +29,24 @@ themes : ['Default', 'Timeline']
<div class="example">
<h4 class="ui header">Feed</h4>
<p>A standard feed with some optional elements</p>
<p>A feed</p>
<div class="ui feed segment">
<div class="event">
<div class="label">
<i class="user icon"></i>
<img src="/images/avatar/small/elliot.jpg">
</div>
<div class="content">
<div class="summary">
<a class="user">
<img src="/images/demo/avatar2.jpg">
Sally Poodle
Elliot Fu
</a> added you as a friend
<div class="date">
1 Hour Ago
</div>
</div>
<div class="meta">
<a class="replies">
2 <i class="comments icon"></i>
</a>
<a class="like">
4 <i class="like icon"></i>
<i class="like icon"></i> 4 Likes
</a>
</div>
</div>
@ -67,111 +63,96 @@ themes : ['Default', 'Timeline']
</div>
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
I'm having a BBQ this weekend. Come by around 4pm if you can.
</div>
<div class="meta">
<a class="replies">
0 <i class="comments icon"></i>
</a>
<a class="like">
5 <i class="like icon"></i>
<i class="like icon"></i> 11 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="photo icon"></i>
<img src="/images/avatar/small/helen.jpg">
</div>
<div class="content">
<div class="date">
4 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>2 new photos</a> of you
<a>Helen Troy</a> added <a>2 new illustrations</a>
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
<a><img src="/images/animals/bear-love.jpg"></a>
<a><img src="/images/animals/rooster-star.jpg"></a>
</div>
<div class="meta">
<a class="replies">
2 <i class="comments icon"></i>
</a>
<a class="like">
4 <i class="like icon"></i>
<i class="like icon"></i> 1 Like
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jenny.jpg">
</div>
<div class="content">
<div class="summary">
<a class="user">
Sally Poodle
Jenny Hess
</a> added you as a friend
<div class="date">
1 Hour Ago
2 Days Ago
</div>
</div>
<div class="meta">
<a class="replies">
2 <i class="comments icon"></i>
</a>
<a class="like">
4 <i class="like icon"></i>
<i class="like icon"></i> 8 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="pencil icon"></i>
<img src="/images/avatar/small/joe.jpg">
</div>
<div class="content">
<div class="summary">
You submitted a new post to the page
<a>Joe Henderson</a> posted on his page
<div class="date">
3 days ago
</div>
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
Ours is a life of constant reruns. We're always circling back to where we'd we started, then starting all over again. Even if we don't run extra laps that day, we surely will come back for more of the same another day soon.
</div>
<div class="meta">
<a class="replies">
0 <i class="comments icon"></i>
</a>
<a class="like">
5 <i class="like icon"></i>
<i class="like icon"></i> 5 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="photo icon"></i>
<img src="/images/avatar/small/justen.jpg">
</div>
<div class="content">
<div class="date">
4 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>2 new photos</a> of you
<a>Justen Kitsune</a> added <a>2 new photos</a> of you
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
<a><img src="/images/animals/bear-love.jpg"></a>
<a><img src="/images/animals/rooster-star.jpg"></a>
</div>
<div class="meta">
<a class="replies">
2 <i class="comments icon"></i>
</a>
<a class="like">
4 <i class="like icon"></i>
<i class="like icon"></i> 41 Likes
</a>
</div>
</div>
@ -183,45 +164,66 @@ themes : ['Default', 'Timeline']
<div class="example">
<h4 class="ui header">Label</h4>
<p>An event can contain a label</p>
<div class="ui feed">
<p>An event can contain an image or icon label</p>
<div class="ui feed segment">
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/elliot.jpg">
</div>
<div class="content">
<div class="summary">
<a>Sally Poodle</a> added you as a friend
</div>
You added Elliot Fu to the group <a>Coworkers</a>
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui feed segment">
<div class="event">
<div class="label">
<i class="pencil icon"></i>
</div>
<div class="content">
<div class="summary">
You submitted a new post to the page
You posted on your friend <a>Stevie Feliciano's</a> wall.
<div class="date">Today</div>
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Date</h4>
<p>An event can contain a date</p>
<div class="ui feed">
<p>An event or an event summary can contain a date</p>
<div class="ui feed segment">
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jenny.jpg">
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added you as a friend
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
</div>
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui feed segment">
<div class="event">
<div class="label">
<img src="/images/avatar/small/jenny.jpg">
</div>
<div class="content">
<div class="summary">
You added <a>Jenny Hess</a> to your <a>coworker</a> group.
<div class="date">
3 days ago
</div>
</div>
</div>
</div>
@ -230,38 +232,38 @@ themes : ['Default', 'Timeline']
<div class="example">
<h4 class="ui header">Additional information</h4>
<p>An event can contain additional content explaining the event</p>
<div class="ui feed">
<p>An event can contain additional information like a set of images or text</p>
<div class="ui feed segment">
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/helen.jpg">
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added 2 photos of you
<a>Helen Troy</a> added 2 photos
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
<a><img src="/images/animals/bear-love.jpg"></a>
<a><img src="/images/animals/rooster-star.jpg"></a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/demo/avatar.jpg">
<img src="/images/avatar/small/jill.jpg">
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> created a post
<a>Jill Kronkite</a> created a post
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
Have you seen what's going on in Israel? Can you believe it.
</div>
</div>
</div>
@ -274,89 +276,102 @@ themes : ['Default', 'Timeline']
<h4 class="ui header">Sizes</h4>
<p>A feed can have different sizes</p>
<div class="ui grid">
<div class="ten wide column">
<div class="ui small feed">
<h4 class="ui header">My Activity</h4>
<div class="event">
<div class="label">
<img src="/images/demo/avatar2.jpg">
</div>
<div class="content">
<div class="date">
Just moments ago
</div>
<div class="summary">
<a>Sally Poodle</a> added you as a friend
</div>
</div>
<div class="ui small feed segment">
<h4 class="ui header">Followers Activity</h4>
<div class="event">
<div class="content">
<div class="summary">
<a>Elliot Fu</a> added <a>Jenny Hess</a> as a friend
</div>
<div class="event">
<div class="label">
<i class="pencil icon"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
You submitted a new post to the page
</div>
<div class="extra text">
I am a dog and I do not know how to make a post
</div>
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Stevie Feliciano</a> added <a>Elliot Fu</a> as a friend
</div>
<div class="event">
<div class="label">
<i class="photo icon"></i>
</div>
<div class="content">
<div class="date">
3 days ago
</div>
<div class="summary">
<a>Sally Poodle</a> added <a>2 new photos</a> of you
</div>
<div class="extra images">
<img src="/images/demo/item1.jpg">
<img src="/images/demo/item2.jpg">
</div>
</div>
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Helen Troy</a> added <a>Christian Rocha</a> as a friend
</div>
</div>
</div>
<div class="six wide column">
<div class="ui small feed">
<h4 class="ui header">Followers Activity</h4>
<div class="event">
<div class="content">
<div class="summary">
<a>Sally Poodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Christian Rocha</a> signed up for the site.
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
</div>
</div
>
</div>
<div class="another example">
<div class="ui large feed segment">
<div class="event">
<div class="label">
<img src="/images/avatar/small/elliot.jpg">
</div>
<div class="content">
<div class="summary">
<a class="user">
Elliot Fu
</a> added you as a friend
<div class="date">
1 Hour Ago
</div>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Sally Poodle</a> added <a>sixpack dog</a> as a friend
</div>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 4 Likes
</a>
</div>
<div class="event">
<div class="content">
<div class="summary">
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend
</div>
</div>
</div>
<div class="event">
<div class="label">
<i class="pencil icon"></i>
</div>
<div class="content">
<div class="summary">
You submitted a new post to the page
<div class="date">
3 days ago
</div>
</div>
<div class="extra text">
I'm having a BBQ this weekend. Come by around 4pm if you can.
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 11 Likes
</a>
</div>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/avatar/small/helen.jpg">
</div>
<div class="content">
<div class="date">
4 days ago
</div>
<div class="summary">
<a>Helen Troy</a> added <a>2 new illustrations</a>
</div>
<div class="extra images">
<a><img src="/images/animals/bear-love.jpg"></a>
<a><img src="/images/animals/rooster-star.jpg"></a>
</div>
<div class="meta">
<a class="like">
<i class="like icon"></i> 1 Like
</a>
</div>
</div>
</div>
</div>

BIN
server/files/images/animals/2035_m3.jpg
View File

Before After
Width: 5000  |  Height: 5000  |  Size: 2.4 MiB

BIN
server/files/images/animals/2036_m3.jpg
View File

Before After
Width: 5000  |  Height: 5000  |  Size: 2.9 MiB

BIN
server/files/images/animals/2041_m3.jpg
View File

Before After
Width: 5000  |  Height: 5000  |  Size: 2.6 MiB

BIN
server/files/images/animals/2043_m3.jpg
View File

Before After
Width: 5000  |  Height: 5000  |  Size: 3.1 MiB

1
server/files/stylesheets/semantic.css
View File

@ -596,6 +596,7 @@ body.guide .main.container > * {
background: url(http://beta.myfav.es/images/themes/bg/subtle/subtle-handmade-paper.png) repeat;
}
#example .peek {
display: none;
position: absolute;
top: 0px;
left: -230px;

71
src/definitions/elements/header.less
View File

@ -194,31 +194,65 @@ h5.ui.header {
.ui.black.header {
color: @black !important;
}
a.ui.black.header:hover {
color: @blackHover;
}
.ui.blue.header {
color: @blue !important;
}
a.ui.blue.header:hover {
color: @blueHover;
}
.ui.green.header {
color: @green !important;
}
a.ui.green.header:hover {
color: @greenHover;
}
.ui.orange.header {
color: @orange !important;
}
a.ui.orange.header:hover {
color: @orangeHover;
}
.ui.pink.header {
color: @pink !important;
}
a.ui.pink.header:hover {
color: @pinkHover;
}
.ui.purple.header {
color: @purple !important;
}
a.ui.purple.header:hover {
color: @purpleHover;
}
.ui.red.header {
color: @red !important;
}
a.ui.red.header:hover {
color: @redHover;
}
.ui.teal.header {
color: @teal !important;
}
a.ui.teal.header:hover {
color: @tealHover;
}
.ui.yellow.header {
color: @yellow !important;
}
a.ui.yellow.header:hover {
color: @yellowHover;
}
.ui.black.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @black;
@ -275,30 +309,65 @@ h5.ui.header {
.ui.inverted.black.header {
color: @darkGrey !important;
}
a.ui.inverted.black.header:hover {
color: @darkGreyHover !important;
}
.ui.inverted.blue.header {
color: @lightBlue !important;
}
a.ui.inverted.blue.header:hover {
color: @lightBlueHover !important;
}
.ui.inverted.green.header {
color: @lightGreen !important;
}
a.ui.inverted.green.header:hover {
color: @lightGreenHover !important;
}
.ui.inverted.orange.header {
color: @lightOrange !important;
}
a.ui.inverted.orange.header:hover {
color: @lightOrangeHover !important;
}
.ui.inverted.pink.header {
color: @lightPink !important;
}
a.ui.inverted.pink.header:hover {
color: @lightPinkHover !important;
}
.ui.inverted.purple.header {
color: @lightPurple !important;
}
a.ui.inverted.purple.header:hover {
color: @lightPurpleHover !important;
}
.ui.inverted.red.header {
color: @lightRed !important;
}
a.ui.inverted.red.header:hover {
color: @lightRedHover !important;
}
.ui.inverted.teal.header {
color: @lightTeal !important;
}
a.ui.inverted.teal.header:hover {
color: @lightTealHover !important;
}
.ui.inverted.yellow.header {
color: @lightYellow !important;
}
a.ui.inverted.yellow.header:hover {
color: @lightYellowHover !important;
}
.ui.inverted.block.header {
border-bottom: none;

35
src/definitions/views/feed.less
View File

@ -88,6 +88,14 @@
text-align: @contentTextAlign;
word-wrap: @contentWordWrap;
}
.ui.feed > .event:last-child > .content {
padding-bottom: @lastLabeledContentPadding;
}
/* Link */
.ui.feed > .event > .content a {
cursor: pointer;
}
/*--------------
Date
@ -95,6 +103,11 @@
.ui.feed > .event > .content .date {
margin: @dateMargin;
padding: @datePadding;
color: @dateColor;
font-weight: @dateFontWeight;
font-size: @dateFontSize;
font-style: @dateFontStyle;
color: @dateColor;
}
@ -143,8 +156,11 @@
display: @summaryDateDisplay;
float: @summaryDateFloat;
font-weight: @summaryDateFontWeight;
font-size: @summaryDateFontSize;
font-style: @summaryDateFontStyle;
margin: @summaryDateMargin;
padding: @summaryDatePadding;
color: @summaryDateColor;
}
/*--------------
@ -169,6 +185,9 @@
.ui.feed > .event > .content .extra.text {
padding: @extraTextPadding;
border-left: @extraTextPointer;
font-size: @extraTextFontSize;
max-width: @extraTextMaxWidth;
line-height: @extraTextLineHeight;
}
/*--------------
@ -189,7 +208,7 @@
.ui.feed > .event > .content .meta > * {
position: relative;
margin-left: 1.5em;
margin-left: @metadataElementSpacing;
}
.ui.feed > .event > .content .meta > *:after {
content: @metadataDivider;
@ -201,6 +220,17 @@
vertical-align: top;
}
.ui.feed > .event > .content .meta .like {
color: @likeColor;
transition: @likeTransition;
}
.ui.feed > .event > .content .meta .like:hover .icon {
color: @likeHoverColor;
}
.ui.feed > .event > .content .meta .active.like .icon {
color: @likeActiveColor;
}
/* First element */
.ui.feed > .event > .content .meta > :first-child {
margin-left: 0em;
@ -235,5 +265,8 @@
.ui.feed {
font-size: @medium;
}
.ui.large.feed {
font-size: @large;
}
.loadUIOverrides();

27
src/themes/packages/default/globals/site.variables
View File

@ -341,6 +341,15 @@
@tealHover : lighten( @teal, 5);
@yellowHover : lighten( @yellow, 5);
@lightBlueHover : lighten( @lightBlue, 5);
@lightGreenHover : lighten( @lightGreen, 5);
@lightOrangeHover : lighten( @lightOrange, 5);
@lightPinkHover : lighten( @lightPink, 5);
@lightPurpleHover : lighten( @lightPurple, 5);
@lightRedHover : lighten( @lightRed, 5);
@lightTealHover : lighten( @lightTeal, 5);
@lightYellowHover : lighten( @lightYellow, 5);
/*--- Emotive ---*/
@positiveColorHover : lighten( @positiveColor, 5);
@negativeColorHover : lighten( @negativeColor, 5);
@ -387,6 +396,15 @@
@tealDown : darken(@teal, 7);
@yellowDown : darken(@yellow, 7);
@lightBlueDown : darken(@lightBlue, 7);
@lightGreenDown : darken(@lightGreen, 7);
@lightOrangeDown : darken(@lightOrange, 7);
@lightPinkDown : darken(@lightPink, 7);
@lightPurpleDown : darken(@lightPurple, 7);
@lightRedDown : darken(@lightRed, 7);
@lightTealDown : darken(@lightTeal, 7);
@lightYellowDown : darken(@lightYellow, 7);
/*--- Emotive ---*/
@positiveColorDown : darken(@positiveColor, 7);
@negativeColorDown : darken(@negativeColor, 7);
@ -432,6 +450,15 @@
@tealActive : darken(@teal, 5);
@yellowActive : darken(@yellow, 5);
@lightBlueActive : darken(@lightBlue, 5);
@lightGreenActive : darken(@lightGreen, 5);
@lightOrangeActive : darken(@lightOrange, 5);
@lightPinkActive : darken(@lightPink, 5);
@lightPurpleActive : darken(@lightPurple, 5);
@lightRedActive : darken(@lightRed, 5);
@lightTealActive : darken(@lightTeal, 5);
@lightYellowActive : darken(@lightYellow, 5);
/*--- Emotive ---*/
@positiveColorActive : darken(@positiveColor, 5);
@negativeColorActive : darken(@negativeColor, 5);

49
src/themes/packages/default/views/feed.variables
View File

@ -15,10 +15,10 @@
/* Event */
@eventDisplay: table;
@eventWidth: 100%;
@eventPadding: 0.5em 0em;
@eventPadding: 0.5rem 0em;
@eventMargin: 0em;
@eventBackground: none;
@eventDivider: 1px solid @borderColor;
@eventDivider: none;
/* Event Label */
@labelDisplay: table-cell;
@ -31,7 +31,7 @@
@iconLabelOpacity: 1;
@iconLabelWidth: 100%;
@iconLabelSize: 1.5em;
@iconLabelPadding: 0.5em;
@iconLabelPadding: 0.25em;
@iconLabelBackground: none;
@iconLabelBorderRadius: none;
@iconLabelBorder: none;
@ -43,7 +43,8 @@
@imageLabelBorderRadius: @circularRadius;
/* Content w/ Label */
@labeledContentPadding: 0.75em 0em 0.75em 1em;
@labeledContentPadding: 0.5em 0em 0.5em 1.5em;
@lastLabeledContentPadding: 0em;
/* Content */
@contentDisplay: table-cell;
@ -52,8 +53,12 @@
@contentWordWrap: break-word;
/* Date */
@dateMargin: -0.4em 0em 0em;
@dateColor: rgba(0, 0, 0, 0.6);
@dateMargin: -0.5rem 0em 0em;
@datePadding: 0em;
@dateColor: @lightTextColor;
@dateFontSize: 1em;
@dateFontWeight: normal;
@dateFontStyle: normal;
/* Summary */
@summaryMargin: 0em;
@ -71,10 +76,12 @@
/* Summary Date */
@summaryDateDisplay: inline-block;
@summaryDateFloat: none;
@summaryDateFontWeight: normal;
@summaryDateFontStyle: normal;
@summaryDateMargin: 0em;
@summaryDateMargin: 0em 0em 0em 0.5em;
@summaryDatePadding: 0em;
@summaryDateFontSize: 0.875em;
@summaryDateFontWeight: @dateFontWeight;
@summaryDateFontStyle: @dateFontStyle;
@summaryDateColor: @dateColor;
/* User */
@userFontWeight: bold;
@ -88,7 +95,7 @@
@extraMargin: 0.5em 0em 0em;
@extraBackground: none;
@extraPadding: 0em;
@extraColor: @lightTextColor;
@extraColor: @textColor;
/* Extra Images */
@extraImageMargin: 0em 0.25em 0em 0em;
@ -96,12 +103,15 @@
/* Extra Text */
@extraTextPadding: 0.5em 1em;
@extraTextPointer: 0.2em solid rgba(0, 0, 0, 0.1);
@extraTextPointer: 3px solid rgba(0, 0, 0, 0.2);
@extraTextFontSize: 1em;
@extraTextLineHeight: 1.33;
@extraTextMaxWidth: 500px;
/* Metadata Group */
@metadataDisplay: inline-block;
@metadataFontSize: 0.9em;
@metadataMargin: 1em 0em 0em;
@metadataFontSize: 0.875em;
@metadataMargin: 0.5em 0em 0em;
@metadataBackground: none;
@metadataBorder: none;
@metadataBorderRadius: 0;
@ -109,8 +119,16 @@
@metadataPadding: 0em;
@metadataColor: rgba(0, 0, 0, 0.6);
@metadataElementSpacing: 0.75em;
/* Like */
@likeColor: '';
@likeHoverColor: #FF2733;
@likeActiveColor: #EF404A;
@likeTransition: 0.2s color ease;
/* Metadata Divider */
@metadataDivider: '|';
@metadataDivider: '';
@metadataDividerColor: rgba(0, 0, 0, 0.2);
@metadataDividerOffset: -1em;
@ -127,4 +145,5 @@
/* Size */
@small: 0.9em;
@medium: 1em;
@medium: 1em;
@large: 1.1em;
Write Preview
Loading…
Cancel
Save