From ad64bfa3610a9bb7e7105039127ee0935aa227bb Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Thu, 5 Mar 2015 12:10:19 -0500 Subject: [PATCH] Revert "rebuilding the category badge css" --- .../stylesheets/common/base/_topic-list.scss | 26 ++ .../stylesheets/common/base/combobox.scss | 1 + .../stylesheets/common/base/header.scss | 9 +- .../stylesheets/common/base/user-badges.scss | 3 +- .../common/components/badges.css.scss | 250 ++++++++++-------- app/assets/stylesheets/desktop/discourse.scss | 1 + app/assets/stylesheets/desktop/header.scss | 4 + .../stylesheets/desktop/topic-list.scss | 19 +- .../stylesheets/desktop/topic-post.scss | 16 ++ app/assets/stylesheets/desktop/topic.scss | 1 + app/assets/stylesheets/mobile/topic-list.scss | 1 + 11 files changed, 214 insertions(+), 117 deletions(-) diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index e9b1645da41..b86750dbdaa 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -99,6 +99,10 @@ } } + td.category a { + max-width:150px; + } + } @@ -152,6 +156,24 @@ margin-left: 8px; } + .badge-category { + padding: 4px 10px; + display: inline-block; + margin-bottom: 10px; + } + + .category-dropdown-menu .badge-category { + width: 100%; + } + .category-dropdown-button { + font-size: 1.143em; + width: 10px; + text-align: center; + + &:hover { + opacity: 0.8; + } + } clear: both; } @@ -201,6 +223,10 @@ ol.category-breadcrumb { background-color: $secondary; z-index: 100; + .cat { + margin-right: 20px; + } + a.badge-category, a.badge-category-parent { line-height: 19px; overflow:hidden; diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss index 82c982ffbe2..5c743b34e07 100644 --- a/app/assets/stylesheets/common/base/combobox.scss +++ b/app/assets/stylesheets/common/base/combobox.scss @@ -13,6 +13,7 @@ } .category-desc { color: $primary; + margin: 6px 0 0 3px; font-size: 0.857em; line-height: 16px; } diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index c5bbac496ba..8549fabc482 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -233,6 +233,11 @@ @include unselectable; } + .category-links li:not(.heading) a { + display: inline-block; + } + + // Site map &#site-map-dropdown { @@ -291,14 +296,12 @@ .category { float: left; background-color: transparent; - line-height: 1.25; + line-height: 20px; width: 45%; margin: 5px 5px 0 5px; .badge-notification { color: scale-color($primary, $lightness: 50%); background-color: transparent; - vertical-align: top; - padding: 5px 5px 2px 5px; } } diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss index 0ce5a3b128a..3c8405def39 100644 --- a/app/assets/stylesheets/common/base/user-badges.scss +++ b/app/assets/stylesheets/common/base/user-badges.scss @@ -3,6 +3,7 @@ padding: 3px 8px; color: $primary; border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%); + font-size: $base-font-size * 0.86; line-height: 19px; margin: 0; display: inline-block; @@ -143,7 +144,7 @@ table.badges-listing { width: 45%; padding: 0 0 0 4%; margin-bottom: 20px; - + .badge-info { width: 100px; display: block; diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss index 6d604b3f6fc..8506cb89171 100644 --- a/app/assets/stylesheets/common/components/badges.css.scss +++ b/app/assets/stylesheets/common/components/badges.css.scss @@ -12,136 +12,162 @@ @include border-radius-all(10px); } -// Category badges +// Category badge // -------------------------------------------------- -.badge-wrapper { +.badge-wrapper span { font-size: 0.857em; font-weight: bold; white-space: nowrap; display: inline-block; + line-height: 1; position: relative; - - &.bar { //general bar category style - line-height: 1.25; - span.badge-category { - color: $primary !important; - padding: 3px; - vertical-align: text-top; - margin-top: -3px; //vertical alignment fix - - } - - .badge-category-parent-bg, .badge-category-bg { - display: inline-block; - padding: 1px; - - &:before { - content: "\a0"; - } - } - - } - - &.box { //general box category style - margin: 5px 2px 0 0; - line-height: 1.25; - i {line-height: 0;} - .badge-category-bg, .badge-category-parent-bg { - position: absolute; - width: 100%; - height: 100%; - top: -3px; - } - .badge-category-parent-bg + .badge-category-bg { //nesting box categories - margin-left: 5px; - } - .badge-category-parent-bg + .badge-category-bg + .badge-category { - margin-left: 5px; - padding-right: 0; - } - span.badge-category { - position: relative; - padding: 0 5px; - } - } - span.badge-category { - max-width: 150px; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - - .d-dropdown & { - max-width: 100px; - - } - - } - } -// Category badge dropdown -// -------------------------------------------------- +.badge-wrapper { + white-space: nowrap; + position: relative; + display: inline-block; +} + +.badge-category { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + .fa { + line-height: 0; + } +} + +.badge-wrapper > .badge-category { + // ie9? + width: 100%; + padding: 5px 4px; +} + +.d-header li.category .badge-wrapper { + max-width: calc(100% - 30px) +} + +h3 .badge-category { + padding-left: 3px; +} + +h3 .badge-wrapper { + padding-left: 4px; +} -.list-controls { -.category-breadcrumb { - a.badge-category { +header .title-wrapper { + + .badge-category-bg, .badge-category { + vertical-align: middle; + } + + .badge-category-bg { + padding-top:0; + padding-bottom:0; + } +} + +.badge-category-parent-bg, .badge-category-bg { + padding: 5px 2px 4px 2px; + width: 2px; + .category-name { + display: none; + } + &:before { + content: "\a0"; + } +} + +.d-dropdown .badge-category { +&.restricted { + span { display: inline-block; - padding: 5px 12px; - line-height: 20px; - &.category-dropdown-button { - margin-left: -4px; - padding: 5px 0 5px 0; - width: 13px; - .fa-caret-down { - margin-left: -5px; - } - .fa-caret-right { - margin-left: -2px; - } - } + margin: 0; } - li.bar>.badge-category:not(.home):first-child { - border-left: 5px solid; +}} + +h1 a.badge-category div {vertical-align: top;} + +.category-breadcrumb li > .badge-category { + float: left; + &:not(.home):first-child { + .badge-category-bg { + display: none; } - li.bar>.badge-category { - background: dark-light-diff($primary, $secondary, 95%, -65%) !important; - color: $primary !important;} } - - .category-dropdown-menu { - .badge-category { - &.home { - margin-left: 4px; - padding-left: 0; - } - } - .cat { - line-height: 0; - } - .badge-wrapper { - &.bar { - margin: 5px 0; - - } - &.box { - width: 100%; - line-height: 0; - margin: 0; - span.badge-category { - padding: 15px 5px; - margin-top: -5px; - } - } - - } - - } - } +.user-preferences .autocomplete .badge-wrapper .badge-category { + margin: 2px; + font-weight: normal; +} + +.user-preferences .autocomplete .selected .badge-wrapper .badge-category { + font-weight: bold; +} + +.ac-wrap { + .badge-wrapper span { + padding-top: 3px; + padding-bottom: 0; + height: 20px; + max-width: 200px; + } +} + +// specific styles for badge categories + +.bar .badge-category { + color: $primary !important; +} + +header .title-wrapper .bar .badge-category { + color: $header-primary !important; +} + + +.category-breadcrumb li.bar > .badge-category { + background: dark-light-diff($primary, $secondary, 95%, -65%) !important; + line-height: 24px; + &:not(.home):first-child { + border-left-width: 5px; + border-left-style: solid; + } +} + +.category-breadcrumb .box > a.badge-category { + margin-bottom: 0; + height: 24px; + // TODO clean this up + padding-top: 6px !important; + padding-bottom: 0 !important; +} + +.category-dropdown-menu .cat .badge-wrapper.box { + width: 110%; +} +.badge-wrapper.box { + .badge-category-bg { + position: absolute; + padding: 0; + width: 100%; + height: 100%; + } + + > .badge-category { + width: 100%; + box-sizing: border-box; + padding: 5px 6px 4px 6px; + } +} + +.title-wrapper .badge-wrapper.box .badge-category { + vertical-align: middle; +} // Notification badge diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss index 97231859588..6b96e29599b 100644 --- a/app/assets/stylesheets/desktop/discourse.scss +++ b/app/assets/stylesheets/desktop/discourse.scss @@ -90,6 +90,7 @@ body { .topic-statuses { float: left; + margin: 0 3px 0 0; padding: 0; .topic-status { padding: 0 2px 0 0; diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss index b5c775d4c8a..7d2a411f4e3 100644 --- a/app/assets/stylesheets/desktop/header.scss +++ b/app/assets/stylesheets/desktop/header.scss @@ -40,6 +40,10 @@ and (max-width : 570px) { // Categories + .category { + line-height: 20px; + } + .btn { padding: 2px 8px; margin-bottom: 2px; diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 130264e2244..089863a1c66 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -22,6 +22,13 @@ a.badge-category { padding: 3px 12px; font-size: 1.143em; + + &.category-dropdown-button { + height: 24px; + padding: 3px 9px 3px 0; + i { height: 20px; } + } + } } @@ -88,6 +95,10 @@ } } + .category { + padding: 0 20px 0 20px; + min-width: 80px; + } .posters { // we know there are up to 5 avatars of fixed size // will be overridden by media width queries on narrow displays to 1 avatar's width @@ -239,6 +250,11 @@ top: -1px; } } + + .category .badge-category { + display: inline-block; + margin-top: 1px; + } } .topic-list-bottom { @@ -258,7 +274,8 @@ .category-dropdown-menu { max-height: 350px; - min-width: 129px; + margin-top: 30px; + min-width: 152px; } #bulk-select { diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 230e28b1490..6451a4e9b2d 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -558,6 +558,22 @@ video { .topic-statuses { margin-top: -2px; } + + .badge-wrapper { + margin: 0 0 0 2px; + padding: 0; + + .badge-category { + color: $header_primary; + margin-right: 5px; + } + + .badge-category-parent { + margin: 0; + padding: 0px 1px; + } + } + } /* override docked header CSS for topics with categories */ diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index 06ac6b7f919..e17e9fa2e3f 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -41,6 +41,7 @@ line-height: 1.2em; overflow: hidden; a {color: $primary;} + margin-bottom: 5px; } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index e924161bf4b..22ea3fc3b73 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -263,6 +263,7 @@ ol.category-breadcrumb { .category-dropdown-menu { height: 200px; + margin-top: 31px; a.badge-category { line-height: 26px !important;