friendica
/
friendica
mirror of https://github.com/friendica/friendica.git
4
7
Fork 5
Code Issues Releases 16 Wiki Activity
Browse Source

quattro: work on 

"like" activitiy items less visible
    fixes to widths
    popup notification out of navbar
    category input in jot
pull/230/head
Fabio Comuni 10 years ago
parent
67a2d5be77
commit
8be7b5c65b
9 changed files with 188 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      view/theme/quattro/TODO
  2. 7
      view/theme/quattro/conversation.tpl
  3. 5
      view/theme/quattro/dark/colors.less
  4. 68
      view/theme/quattro/dark/style.css
  5. 68
      view/theme/quattro/green/style.css
  6. 6
      view/theme/quattro/jot.tpl
  7. 1
      view/theme/quattro/nav.tpl
  8. 60
      view/theme/quattro/quattro.less
  9. 23
      view/theme/quattro/wall_item_tag.tpl

2
view/theme/quattro/TODO
Unescape View File

@ -0,0 +1,2 @@
jot.tpl: <!-- TODO: waiting for a better placement
nav.tpl: <!-- TODO: better icons! -->

7
view/theme/quattro/conversation.tpl
Unescape View File

@ -9,8 +9,11 @@
{{endif}}
{{if $item.comment_lastcollapsed}}</div>{{endif}}
{{ inc $item.template }}{{ endinc }}
{{ if $item.type == tag }}
{{ inc wall_item_tag.tpl }}{{ endinc }}
{{ else }}
{{ inc $item.template }}{{ endinc }}
{{ endif }}
{{ endfor }}
</div>

5
view/theme/quattro/dark/colors.less
Unescape View File

@ -38,7 +38,7 @@
@Link: @Blue3;
@LinkHover: @Blue3;
@LinkVisited: @Blue3;
@LinkDimmed: @Blue2;
@ButtonColor: @Grey1;
@ButtonBackgroundColor: @Grey5;
@ -76,6 +76,9 @@
@ThreadBackgroundColor: #f6f7f8;
@ShinyBorderColor: @Yellow1;
@ItemColor: @Grey5;
@ItemColorDimmed: @Grey3;
@CommentBoxEmptyColor: @Grey3;
@CommentBoxEmptyBorderColor: @Grey3;
@CommentBoxFullColor: @Grey5;

68
view/theme/quattro/dark/style.css
Unescape View File

@ -314,6 +314,10 @@ code {
float: right;
}
/* popup notifications */
#jGrowl.top-right {
top: 30px;
right: 15px;
}
div.jGrowl div.notice {
background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
color: #ffffff;
@ -565,7 +569,7 @@ ul.menu-popup .toolbar a:hover {
color: #9eabb0;
display: block;
}
/* aside */
/* aside 230px*/
aside {
display: table-cell;
vertical-align: top;
@ -772,11 +776,11 @@ aside #profiles-menu {
width: 200px;
top: 18px;
}
/* section */
/* section 800px */
section {
display: table-cell;
vertical-align: top;
width: 800px;
width: 770px;
padding: 0px 20px 0px 10px;
}
/* wall item */
@ -785,7 +789,7 @@ section {
position: relative;
padding: 10px;
margin-bottom: 20px;
width: 780px;
width: 750px;
}
.wall-item-decor {
position: absolute;
@ -798,7 +802,7 @@ section {
}
.wall-item-container {
display: table;
width: 780px;
width: 750px;
}
.wall-item-container .wall-item-item,
.wall-item-container .wall-item-bottom {
@ -890,26 +894,42 @@ section {
.wall-item-container .wall-item-actions-tools input {
float: right;
}
.wall-item-container.comment {
/*margin-top: 50px;*/
.wall-item-container.comment .contact-photo-wrapper {
margin-left: 16px;
}
.wall-item-container.comment .contact-photo {
width: 32px;
height: 32px;
margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
}
.wall-item-container.comment .contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
left: 0px !important;
}
.wall-item-container.comment .wall-item-links {
padding-left: 12px;
}
/* 'tag' item type */
.wall-item-container.item-tag .wall-item-content {
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.wall-item-container.item-tag .contact-photo-wrapper {
margin-left: 32px;
}
.wall-item-container.item-tag .contact-photo {
width: 16px;
height: 16px;
}
.wall-item-container.item-tag .contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
}
.wall-item-comment-wrapper {
margin: 30px 2em 2em 60px;
margin: 1em 2em 1em 60px;
}
.wall-item-comment-wrapper .comment-edit-photo {
display: none;
@ -961,6 +981,9 @@ section {
#jot-preview-content .tread-wrapper {
background-color: #fce94f;
}
.hide-comments-outer {
margin-bottom: 0.8em;
}
.wall-item-tags {
padding-top: 5px;
}
@ -1087,7 +1110,7 @@ section {
padding: 0px;
height: 40px;
overflow: none;
width: 800px;
width: 770px;
background-color: #0e232e;
border-bottom: 2px solid #9eabb0;
}
@ -1162,7 +1185,7 @@ section {
border: 0px;
margin: 0px;
height: 20px;
width: 700px;
width: 500px;
font-weight: bold;
border: 1px solid #ffffff;
}
@ -1179,13 +1202,26 @@ section {
border: 1px solid #999999;
}
#jot #character-counter {
width: 80px;
width: 40px;
float: right;
text-align: right;
height: 20px;
line-height: 20px;
padding-right: 20px;
}
#jot #jot-category {
border: 0px;
margin: 0px;
height: 20px;
width: 200px;
border: 1px solid #ffffff;
}
#jot #jot-category:hover {
border: 1px solid #999999;
}
#jot #jot-category:focus {
border: 1px solid #999999;
}
/** buttons **/
/*input[type="submit"] {
border: 0px;

68
view/theme/quattro/green/style.css
Unescape View File

@ -314,6 +314,10 @@ code {
float: right;
}
/* popup notifications */
#jGrowl.top-right {
top: 30px;
right: 15px;
}
div.jGrowl div.notice {
background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
color: #ffffff;
@ -565,7 +569,7 @@ ul.menu-popup .toolbar a:hover {
color: #9eabb0;
display: block;
}
/* aside */
/* aside 230px*/
aside {
display: table-cell;
vertical-align: top;
@ -772,11 +776,11 @@ aside #profiles-menu {
width: 200px;
top: 18px;
}
/* section */
/* section 800px */
section {
display: table-cell;
vertical-align: top;
width: 800px;
width: 770px;
padding: 0px 20px 0px 10px;
}
/* wall item */
@ -785,7 +789,7 @@ section {
position: relative;
padding: 10px;
margin-bottom: 20px;
width: 780px;
width: 750px;
}
.wall-item-decor {
position: absolute;
@ -798,7 +802,7 @@ section {
}
.wall-item-container {
display: table;
width: 780px;
width: 750px;
}
.wall-item-container .wall-item-item,
.wall-item-container .wall-item-bottom {
@ -890,26 +894,42 @@ section {
.wall-item-container .wall-item-actions-tools input {
float: right;
}
.wall-item-container.comment {
/*margin-top: 50px;*/
.wall-item-container.comment .contact-photo-wrapper {
margin-left: 16px;
}
.wall-item-container.comment .contact-photo {
width: 32px;
height: 32px;
margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
}
.wall-item-container.comment .contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
left: 0px !important;
}
.wall-item-container.comment .wall-item-links {
padding-left: 12px;
}
/* 'tag' item type */
.wall-item-container.item-tag .wall-item-content {
opacity: 0.5;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.wall-item-container.item-tag .contact-photo-wrapper {
margin-left: 32px;
}
.wall-item-container.item-tag .contact-photo {
width: 16px;
height: 16px;
}
.wall-item-container.item-tag .contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
}
.wall-item-comment-wrapper {
margin: 30px 2em 2em 60px;
margin: 1em 2em 1em 60px;
}
.wall-item-comment-wrapper .comment-edit-photo {
display: none;
@ -961,6 +981,9 @@ section {
#jot-preview-content .tread-wrapper {
background-color: #ddffdd;
}
.hide-comments-outer {
margin-bottom: 0.8em;
}
.wall-item-tags {
padding-top: 5px;
}
@ -1087,7 +1110,7 @@ section {
padding: 0px;
height: 40px;
overflow: none;
width: 800px;
width: 770px;
background-color: #009100;
border-bottom: 2px solid #9eabb0;
}
@ -1162,7 +1185,7 @@ section {
border: 0px;
margin: 0px;
height: 20px;
width: 700px;
width: 500px;
font-weight: bold;
border: 1px solid #ffffff;
}
@ -1179,13 +1202,26 @@ section {
border: 1px solid #999999;
}
#jot #character-counter {
width: 80px;
width: 40px;
float: right;
text-align: right;
height: 20px;
line-height: 20px;
padding-right: 20px;
}
#jot #jot-category {
border: 0px;
margin: 0px;
height: 20px;
width: 200px;
border: 1px solid #ffffff;
}
#jot #jot-category:hover {
border: 1px solid #999999;
}
#jot #jot-category:focus {
border: 1px solid #999999;
}
/** buttons **/
/*input[type="submit"] {
border: 0px;

6
view/theme/quattro/jot.tpl
Unescape View File

@ -1,8 +1,10 @@
<form id="profile-jot-form" action="$action" method="post">
<div id="jot">
<div id="profile-jot-desc" class="jothidden">&nbsp;</div>
<input name="title" id="jot-title" type="text" placeholder="$placeholdertitle" value="$title" class="jothidden" style="display:none" />
<input name="title" id="jot-title" type="text" placeholder="$placeholdertitle" title="$placeholdertitle" value="$title" class="jothidden" style="display:none" /><input name="category" id="jot-category" type="text" placeholder="$placeholdercategory" title="$placeholdercategory" value="$category" class="jothidden" style="display:none" />
<div id="character-counter" class="grey jothidden"></div>
<input type="hidden" name="type" value="$ptyp" />
<input type="hidden" name="profile_uid" value="$profile_uid" />
@ -20,8 +22,10 @@
<li><a id="profile-link" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;" title="$weblink">$shortweblink</a></li>
<li><a id="profile-video" onclick="jotVideoURL();return false;" title="$gvideo">$shortvideo</a></li>
<li><a id="profile-audio" onclick="jotAudioURL();return false;" title="$audio">$shortaudio</a></li>
<!-- TODO: waiting for a better placement
<li><a id="profile-location" onclick="jotGetLocation();return false;" title="$setloc">$shortsetloc</a></li>
<li><a id="profile-nolocation" onclick="jotClearLocation();return false;" title="$noloc">$shortnoloc</a></li>
-->
<li><a id="jot-preview-link" onclick="preview_post(); return false;" title="$preview">$preview</a></li>
$jotplugins

1
view/theme/quattro/nav.tpl
Unescape View File

@ -43,6 +43,7 @@
<li id="nav-notifications-linkmenu" class="nav-menu-icon"><a href="$nav.notifications.0" rel="#nav-notifications-menu" title="$nav.notifications.1"><span class="icon s22 notify">$nav.notifications.1</span></a>
<span id="notify-update" class="nav-notify"></span>
<ul id="nav-notifications-menu" class="menu-popup">
<!-- TODO: better icons! -->
<li id="nav-notifications-mark-all" class="toolbar"><a href="#" onclick="notifyMarkAll(); return false;" title="$nav.notifications.mark.1"><span class="icon s10 edit"></span></a></a><a href="$nav.notifications.all.0" title="$nav.notifications.all.1"><span class="icon s10 plugin"></span></a></li>
<li class="empty">$emptynotifications</li>
</ul>

60
view/theme/quattro/quattro.less
Unescape View File

@ -87,6 +87,10 @@ code {
/* popup notifications */
#jGrowl.top-right {
top: 30px;
right: 15px;
}
div.jGrowl div.notice {
background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
color: @NoticeColor;
@ -270,7 +274,7 @@ ul.menu-popup {
/* aside */
/* aside 230px*/
aside {
display: table-cell;
vertical-align: top;
@ -403,11 +407,11 @@ aside {
}
/* section */
/* section 800px */
section {
display: table-cell;
vertical-align: top;
width: 800px;
width: 770px;
padding:0px 20px 0px 10px;
}
@ -417,14 +421,14 @@ section {
position: relative;
padding: 10px;
margin-bottom: 20px;
width: 780px;
width: 750px;
}
.wall-item-decor { position: absolute; left: 97%; top: -10px; width: 16px;}
.unstarred { display: none; }
.wall-item-container {
display: table;
width: 780px;
width: 750px;
.wall-item-item,
.wall-item-bottom { display: table-row; }
@ -478,19 +482,35 @@ section {
.wall-item-container.comment {
/*margin-top: 50px;*/
.contact-photo { width: 32px; height: 32px; margin-left: 16px;
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
.contact-photo-wrapper { margin-left: 16px; }
.contact-photo {
width: 32px; height: 32px;
}
.contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
left: 0px !important;
}
.wall-item-links { padding-left: 12px; }
}
/* 'tag' item type */
.wall-item-container.item-tag {
.wall-item-content {
.opaque(0.5);
}
.contact-photo-wrapper { margin-left: 32px; }
.contact-photo {
width: 16px; height: 16px;
}
.contact-photo-menu-button {
top: 15px !important;
left: 15px !important;
}
}
.wall-item-comment-wrapper {
margin: 30px 2em 2em 60px;
margin: 1em 2em 1em 60px;
.comment-edit-photo { display: none; }
textarea {
height: 1em; width: 100%; font-size: 10px;
@ -522,13 +542,12 @@ section {
.wall-item-container { width: 700px; }
.tread-wrapper { width: 700px; padding: 0; margin: 10px 0;}
}
.shiny { border-right:10px solid @ShinyBorderColor; }
#jot-preview-content .tread-wrapper { background-color: @JotPreviewBackgroundColor; }
.hide-comments-outer {margin-bottom: 0.8em; }
.wall-item-tags { padding-top: 5px; }
.tag {
@ -638,7 +657,7 @@ section {
#jot-tools {
margin: 0px; padding: 0px;
height: 40px; overflow: none;
width: 800px;
width: 770px;
background-color: @JotToolsBackgroundColor;
border-bottom: 2px solid @JotToolsBorderColor;
li {
@ -710,7 +729,7 @@ section {
border: 0px;
margin: 0px;
height: 20px;
width: 700px;
width: 500px;
font-weight: bold;
border: 1px solid @BodyBackground;
@ -727,14 +746,23 @@ section {
}
#character-counter {
width: 80px;
width: 40px;
float: right;
text-align: right;
height: 20px;
line-height: 20px;
padding-right: 20px;
}
#jot-category {
border: 0px;
margin: 0px;
height: 20px;
width: 200px;
border: 1px solid @BodyBackground;
&:hover { border: 1px solid @CommentBoxEmptyBorderColor }
&:focus { border: 1px solid @CommentBoxEmptyBorderColor }
}
}

23
view/theme/quattro/wall_item_tag.tpl
Unescape View File

@ -0,0 +1,23 @@
<div class="wall-item-container item-tag $item.indent">
<div class="wall-item-item">
<div class="wall-item-info">
<div class="contact-photo-wrapper">
<a href="$item.profile_url" target="redir" title="$item.linktitle" class="contact-photo-link" id="wall-item-photo-link-$item.id">
<img src="$item.thumb" class="contact-photo$item.sparkle" id="wall-item-photo-$item.id" alt="$item.name" />
</a>
<ul class="contact-menu menu-popup" id="wall-item-photo-menu-$item.id">
$item.item_photo_menu
</ul>
</div>
<div class="wall-item-location">$item.location</div>
</div>
<div class="wall-item-content">
$item.body
</div>
</div>
</div>
<div class="wall-item-comment-wrapper" >
$item.comment
</div>
Write Preview
Loading…
Cancel
Save