From e986fc3e301f2a0cfb3b975fe60974fc5dcfd76b Mon Sep 17 00:00:00 2001 From: Fabio Comuni Date: Tue, 27 Sep 2011 16:54:33 +0200 Subject: quattro: actions in wall_item less html in conversation.php removed unused tpls fixed old themes --- view/theme/quattro/icons.less | 2 +- view/theme/quattro/quattro.less | 46 ++++++++++++++++++++++--- view/theme/quattro/style.css | 76 ++++++++++++++++++++++++++++++++++------- 3 files changed, 106 insertions(+), 18 deletions(-) (limited to 'view/theme/quattro') diff --git a/view/theme/quattro/icons.less b/view/theme/quattro/icons.less index c5dc1937b..525ca48d8 100644 --- a/view/theme/quattro/icons.less +++ b/view/theme/quattro/icons.less @@ -44,7 +44,7 @@ } &.s48 { width:48px; height: 48px; - .icons(22); + .icons(48); } diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less index 95dd61adb..1be65ea91 100644 --- a/view/theme/quattro/quattro.less +++ b/view/theme/quattro/quattro.less @@ -21,10 +21,18 @@ body { -webkit-border-radius: @arguments; border-radius: @arguments; } - .roundbottom (@radius: 5px){ .rounded(0, 0, @radius, @radius); } .roundtop (@radius: 5px){ .rounded(@radius, @radius, 0, 0); } +.opaque(@v: 0.5){ + opacity: @v; + -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; +} + a, a:link { color: @Link; text-decoration: none; } a:visited { color: @LinkVisited; text-decoration: none; } a:hover {color: @LinkHover; text-decoration: underline; } @@ -257,7 +265,7 @@ section { /* wall item */ .tread-wrapper { - background-color: @ThreadBackgroundColor; + background-color: @ThreadBackgroundColor; position: relative; padding: 10px; margin-bottom: 20px; @@ -268,7 +276,6 @@ section { .wall-item-container { display: table; width: 780px; - margin-bottom: 10px; .wall-item-item, .wall-item-bottom { display: table-row; } @@ -290,22 +297,51 @@ section { .wall-item-photo-menu { display: none; } } + .wall-item-location { + word-wrap: break-word; + width: 50px; + } .wall-item-content { display: table-cell; - font-size: 12px; + font-size: 16px; max-width: 720px; word-wrap: break-word; } .wall-item-content img { max-width: 710px; } .wall-item-links, - .wall-item-actions { display: table-cell; } + .wall-item-actions { + display: table-cell; + vertical-align: middle; + + .icon { + .opaque(0.5); + } + .icon:hover { + .opaque(1.0); + } + } .wall-item-ago { padding-right: 40px; } + .wall-item-name { font-weight: bold; } + + .wall-item-actions-author { float: left; width: 25%; margin-top: 0.5em; } + .wall-item-actions-social { float: left; width: 50%; margin-top: 0.5em; + a { margin-right: 3em; } + } + .wall-item-actions-tools { float: right; width: 25%; + a { float: right; } + input { float: right; } + } } + + + .wall-item-container.comment { + margin-top: 50px; .wall-item-photo { width: 32px; height: 32px; margin-left: 16px;} .wall-item-photo-menu-button { top: 13px !important; left: 10px !important; } + .wall-item-links { padding-left: 12px; } } diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css index ad50ee327..4d9e12540 100644 --- a/view/theme/quattro/style.css +++ b/view/theme/quattro/style.css @@ -121,34 +121,34 @@ height: 48px; } .icon.s48.notify { - background-image: url("../../../images/icons/22/notify_off.png"); + background-image: url("../../../images/icons/48/notify_off.png"); } .icon.s48.gear { - background-image: url("../../../images/icons/22/gear.png"); + background-image: url("../../../images/icons/48/gear.png"); } .icon.s48.add { - background-image: url("../../../images/icons/22/add.png"); + background-image: url("../../../images/icons/48/add.png"); } .icon.s48.delete { - background-image: url("../../../images/icons/22/delete.png"); + background-image: url("../../../images/icons/48/delete.png"); } .icon.s48.edit { - background-image: url("../../../images/icons/22/edit.png"); + background-image: url("../../../images/icons/48/edit.png"); } .icon.s48.star { - background-image: url("../../../images/icons/22/star.png"); + background-image: url("../../../images/icons/48/star.png"); } .icon.s48.menu { - background-image: url("../../../images/icons/22/menu.png"); + background-image: url("../../../images/icons/48/menu.png"); } .icon.s48.link { - background-image: url("../../../images/icons/22/link.png"); + background-image: url("../../../images/icons/48/link.png"); } .icon.s48.lock { - background-image: url("../../../images/icons/22/lock.png"); + background-image: url("../../../images/icons/48/lock.png"); } .icon.s48.unlock { - background-image: url("../../../images/icons/22/unlock.png"); + background-image: url("../../../images/icons/48/unlock.png"); } /* global */ body { @@ -507,7 +507,6 @@ section { .wall-item-container { display: table; width: 780px; - margin-bottom: 10px; } .wall-item-container .wall-item-item, .wall-item-container .wall-item-bottom { display: table-row; @@ -534,9 +533,13 @@ section { .wall-item-container .wall-item-info .wall-item-photo-menu { display: none; } +.wall-item-container .wall-item-location { + word-wrap: break-word; + width: 50px; +} .wall-item-container .wall-item-content { display: table-cell; - font-size: 12px; + font-size: 16px; max-width: 720px; word-wrap: break-word; } @@ -545,10 +548,56 @@ section { } .wall-item-container .wall-item-links, .wall-item-container .wall-item-actions { display: table-cell; + vertical-align: middle; +} +.wall-item-container .wall-item-links .icon, .wall-item-container .wall-item-actions .icon { + 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 .wall-item-links .icon:hover, .wall-item-container .wall-item-actions .icon:hover { + opacity: 1; + -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 .wall-item-ago { padding-right: 40px; } +.wall-item-container .wall-item-name { + font-weight: bold; +} +.wall-item-container .wall-item-actions-author { + float: left; + width: 25%; + margin-top: 0.5em; +} +.wall-item-container .wall-item-actions-social { + float: left; + width: 50%; + margin-top: 0.5em; +} +.wall-item-container .wall-item-actions-social a { + margin-right: 3em; +} +.wall-item-container .wall-item-actions-tools { + float: right; + width: 25%; +} +.wall-item-container .wall-item-actions-tools a { + float: right; +} +.wall-item-container .wall-item-actions-tools input { + float: right; +} +.wall-item-container.comment { + margin-top: 50px; +} .wall-item-container.comment .wall-item-photo { width: 32px; height: 32px; @@ -558,3 +607,6 @@ section { top: 13px !important; left: 10px !important; } +.wall-item-container.comment .wall-item-links { + padding-left: 12px; +} -- cgit v1.2.3