Skip to content

Commit

Permalink
Added comments widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxmert
maxmert committed May 20, 2014
1 parent d3d20fb commit 942ab69
Show file tree
Hide file tree
Showing 15 changed files with 371 additions and 26 deletions.
49 changes: 40 additions & 9 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18178,71 +18178,71 @@ a.-btn, a.-btn-ghost, a.-btn-bordered {
.-avatar._tiny .-thumbnail {
height: 16px;
width: 16px;
margin-right: 0.05em; }
margin-right: 0.15em; }
.-avatar._tiny._round_ .-thumbnail {
border-radius: 8px; }
.-avatar._small._bordered_ .-thumbnail {
border-width: 2px; }
.-avatar._small .-thumbnail {
height: 32px;
width: 32px;
margin-right: 0.1em; }
margin-right: 0.3em; }
.-avatar._small._round_ .-thumbnail {
border-radius: 16px; }
.-avatar._minor._bordered_ .-thumbnail {
border-width: 3px; }
.-avatar._minor .-thumbnail {
height: 48px;
width: 48px;
margin-right: 0.15em; }
margin-right: 0.45em; }
.-avatar._minor._round_ .-thumbnail {
border-radius: 24px; }
.-avatar._bordered_ .-thumbnail {
border-width: 4px; }
.-avatar .-thumbnail {
height: 64px;
width: 64px;
margin-right: 0.2em; }
margin-right: 0.6em; }
.-avatar._round_ .-thumbnail {
border-radius: 32px; }
.-avatar._normal._bordered_ .-thumbnail {
border-width: 4px; }
.-avatar._normal .-thumbnail {
height: 64px;
width: 64px;
margin-right: 0.2em; }
margin-right: 0.6em; }
.-avatar._normal._round_ .-thumbnail {
border-radius: 32px; }
.-avatar._major._bordered_ .-thumbnail {
border-width: 5px; }
.-avatar._major .-thumbnail {
height: 80px;
width: 80px;
margin-right: 0.25em; }
margin-right: 0.75em; }
.-avatar._major._round_ .-thumbnail {
border-radius: 40px; }
.-avatar._big._bordered_ .-thumbnail {
border-width: 6px; }
.-avatar._big .-thumbnail {
height: 96px;
width: 96px;
margin-right: 0.3em; }
margin-right: 0.9em; }
.-avatar._big._round_ .-thumbnail {
border-radius: 48px; }
.-avatar._huge._bordered_ .-thumbnail {
border-width: 7px; }
.-avatar._huge .-thumbnail {
height: 112px;
width: 112px;
margin-right: 0.35em; }
margin-right: 1.05em; }
.-avatar._huge._round_ .-thumbnail {
border-radius: 56px; }
.-avatar._divine._bordered_ .-thumbnail {
border-width: 8px; }
.-avatar._divine .-thumbnail {
height: 128px;
width: 128px;
margin-right: 0.4em; }
margin-right: 1.2em; }
.-avatar._divine._round_ .-thumbnail {
border-radius: 64px; }
.-avatar:empty {
Expand All @@ -18256,6 +18256,37 @@ a.-avatar {
@media screen and (max-width: 768px) {
.-avatar .-thumbnail {
display: none; } }
.-comments {
list-style: none;
margin: 0; }
.-comments .-item {
display: table;
width: 100%;
table-layout: fixed;
width: auto;
margin-bottom: 25px; }
.-comments .-item:after {
content: "";
display: table;
clear: both; }
.-comments .-item .-content {
display: table-cell;
vertical-align: top; }
.-comments .-item .-content .-avatar {
margin-bottom: 0.1em; }
.-comments .-item .-content._hidden_, .-comments .-item .-content ._hidden_ {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out; }
.-comments .-item:hover .-content._hidden_, .-comments .-item:hover .-content ._hidden_ {
opacity: 1; }
.-comments .-item:empty {
display: none; }

@media screen and (max-width: 768px) {
.-comments .-item .-content._hidden_, .-comments .-item .-content ._hidden_ {
opacity: 1; } }
.-modal {
position: fixed;
top: 0;
Expand Down
11 changes: 11 additions & 0 deletions docs/coffee/contents.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,17 @@ exports.widgets = [
}
]
}
{
name: "comments"
path: "commentsCommon"
include: [
{
name: "common"
path: "commentsCommon"
invisible: yes
}
]
}
{
name: "spinners"
path: "spinnersCommon"
Expand Down
49 changes: 40 additions & 9 deletions docs/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18178,71 +18178,71 @@ a.-btn, a.-btn-ghost, a.-btn-bordered {
.-avatar._tiny .-thumbnail {
height: 16px;
width: 16px;
margin-right: 0.05em; }
margin-right: 0.15em; }
.-avatar._tiny._round_ .-thumbnail {
border-radius: 8px; }
.-avatar._small._bordered_ .-thumbnail {
border-width: 2px; }
.-avatar._small .-thumbnail {
height: 32px;
width: 32px;
margin-right: 0.1em; }
margin-right: 0.3em; }
.-avatar._small._round_ .-thumbnail {
border-radius: 16px; }
.-avatar._minor._bordered_ .-thumbnail {
border-width: 3px; }
.-avatar._minor .-thumbnail {
height: 48px;
width: 48px;
margin-right: 0.15em; }
margin-right: 0.45em; }
.-avatar._minor._round_ .-thumbnail {
border-radius: 24px; }
.-avatar._bordered_ .-thumbnail {
border-width: 4px; }
.-avatar .-thumbnail {
height: 64px;
width: 64px;
margin-right: 0.2em; }
margin-right: 0.6em; }
.-avatar._round_ .-thumbnail {
border-radius: 32px; }
.-avatar._normal._bordered_ .-thumbnail {
border-width: 4px; }
.-avatar._normal .-thumbnail {
height: 64px;
width: 64px;
margin-right: 0.2em; }
margin-right: 0.6em; }
.-avatar._normal._round_ .-thumbnail {
border-radius: 32px; }
.-avatar._major._bordered_ .-thumbnail {
border-width: 5px; }
.-avatar._major .-thumbnail {
height: 80px;
width: 80px;
margin-right: 0.25em; }
margin-right: 0.75em; }
.-avatar._major._round_ .-thumbnail {
border-radius: 40px; }
.-avatar._big._bordered_ .-thumbnail {
border-width: 6px; }
.-avatar._big .-thumbnail {
height: 96px;
width: 96px;
margin-right: 0.3em; }
margin-right: 0.9em; }
.-avatar._big._round_ .-thumbnail {
border-radius: 48px; }
.-avatar._huge._bordered_ .-thumbnail {
border-width: 7px; }
.-avatar._huge .-thumbnail {
height: 112px;
width: 112px;
margin-right: 0.35em; }
margin-right: 1.05em; }
.-avatar._huge._round_ .-thumbnail {
border-radius: 56px; }
.-avatar._divine._bordered_ .-thumbnail {
border-width: 8px; }
.-avatar._divine .-thumbnail {
height: 128px;
width: 128px;
margin-right: 0.4em; }
margin-right: 1.2em; }
.-avatar._divine._round_ .-thumbnail {
border-radius: 64px; }
.-avatar:empty {
Expand All @@ -18256,6 +18256,37 @@ a.-avatar {
@media screen and (max-width: 768px) {
.-avatar .-thumbnail {
display: none; } }
.-comments {
list-style: none;
margin: 0; }
.-comments .-item {
display: table;
width: 100%;
table-layout: fixed;
width: auto;
margin-bottom: 25px; }
.-comments .-item:after {
content: "";
display: table;
clear: both; }
.-comments .-item .-content {
display: table-cell;
vertical-align: top; }
.-comments .-item .-content .-avatar {
margin-bottom: 0.1em; }
.-comments .-item .-content._hidden_, .-comments .-item .-content ._hidden_ {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out; }
.-comments .-item:hover .-content._hidden_, .-comments .-item:hover .-content ._hidden_ {
opacity: 1; }
.-comments .-item:empty {
display: none; }

@media screen and (max-width: 768px) {
.-comments .-item .-content._hidden_, .-comments .-item .-content ._hidden_ {
opacity: 1; } }
.-modal {
position: fixed;
top: 0;
Expand Down
14 changes: 12 additions & 2 deletions docs/js/app.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/js/templates.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/templates/kit/widgets/avatars/common.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ <h4>Global variables</h4>
$avatar-border-radius: 3px !global
$avatar-border-width: 4px !global
$avatar-border-style: solid !global
$avatar-margin: 0.6em !global
$avatar-size: 64px !global</pre></div>
</p>

Expand Down
Loading

0 comments on commit 942ab69

Please sign in to comment.