diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index 29198ac32af..6e2e618b75d 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -1,3 +1,287 @@ +.list-controls { + #navigation-bar { + .has-icon span:before { + margin-right: 4px; + font: 15px/0.9 "FontAwesome"; + } + .has-icon .starred:before { + content: "\f005"; + } + .has-icon .unread:before { + content: "\f02e"; + } + } +} + +#topic-list { + width: 100%; + border-collapse: separate; + border-spacing: 0; + border-top: 1px solid scale-color-diff(); + + > tbody > tr { + &:nth-child(even) { + background-color: darken($secondary, 3%); + } + &.archived a { + opacity: 0.6; + } + &.has-excerpt .star { + vertical-align: top; + margin-top: 2px; + } + &.category-description { + td { + color: $danger; + } + } + &.highlighted { + background-color: scale-color($tertiary, $lightness: 85%); + } + } + + th, + td { + line-height: 1.25; + text-align: left; + vertical-align: middle; + + } + th { + color: scale-color($primary, $lightness: 50%); + font-weight: normal; + font-size: 14px; + button i.fa {color: scale-color($primary, $lightness: 50%);} + + } + td { + color: scale-color($primary, $lightness: 50%); + font-size: 14px; + } + + .main-link { + font-size: 16px; + + i.score { + color: $success; + cursor: pointer; + } + } + + .topic-excerpt { + font-size: 13px; + margin-top: 8px; + color: scale-color($primary, $lightness: 50%); + word-break: break-word; + line-height: 1.4; + } + .topic-statuses:empty { + display: none; + } + .topic-status { + margin-right: 4px; + padding: 0; + font-size: 15px; + &:last-of-type { + margin-right: 0; + } + } + + .num { + text-align: center; + a:not(.badge-posts) { + color: inherit; + } + a.badge-posts { + font-weight: bold; + } + } + +} + + +#topic-list.categories { + +td.category { + vertical-align: top; + padding-top: 15px; + padding-bottom: 15px; + border-left: 6px solid; +} +td.stats { + .unit { + font-size: 11px; + } +} + + table.categoryStats { + td { + padding: 2px; + vertical-align: bottom; + line-height: 24px; + &.value { text-align: right; font-size: 20px; } + &.unit { text-align: left; } + } + } + +} + +.category-list-item { + margin-bottom: 10px; + #topic-list tbody tr:nth-child(even) { + background-color: darken($secondary, 3%); + } + th .badge-category { + float: left; + margin: 1px 4px 0 0; + } + .posters { + float: left; + } + > footer { + border: 1px solid scale-color-diff(); + border-top: 0; + padding: 7px 10px; + background-color: scale-color-diff(); + figure { + float: left; + margin: 3px 7px 0 0; + color: scale-color($primary, $lightness: 10%); + font-weight: bold; + font-size: 12px; + } + figcaption { + display: inline; + font-weight: normal; + } + .btn { + float: right; + margin-left: 7px; + } + } +} + +.loading #topic-list { + border: 0; + @include box-shadow(none); + tr { + background-color: transparent; + } +} + + +.topics-loading { + width: 200px; + margin: 0 auto; + padding: 10px 0 10px 43px; + color: $secondary; + font-size: 18px; + line-height: 25px; + background: { + color: #000; + image: image-url("spinner_96_w.gif"); + repeat: no-repeat; + position: 10px 50%; + size: 25px; + }; + @include border-radius-all(12px); +} + +.list-controls { + .home { + background-color: scale-color-diff(); + color: $primary; + } + .badge-category { + padding: 4px 10px; + display: inline-block; + line-height: 24px; + float: left; + } + .category-dropdown-button { + border-left: 1px solid rgba(0,0,0,0.15); + font-size: 16px; + width: 10px; + text-align: center; + + &:hover { + opacity: 0.8; + } + } +clear: both; +} + +#list-area { + margin-bottom: 300px; + .empty-topic-list { + padding: 10px; + } + .unseen { + background-color: transparent; + padding: 0; + border: 0; + color: scale-color($danger, $lightness: 20%); + font-size: 13px; + cursor: default; + } +} + +#topic-list { + .alert { + margin-bottom: 0; + font-size: 14px; + } + .spinner { + margin-top: 40px; + } +} + +span.posted { + display: inline-block; + text-indent: -9999em; + width: 15px; + height: 15px; + background: { + image: image-url("posted.png"); + } +} + +ol.category-breadcrumb { + display: block; + float: left; + list-style: none; + margin: 0 10px 0 0; + padding: 0; + + li { + float: left; + margin-right: 5px; + } +} + +.category-dropdown-menu { + overflow-x: hidden; + overflow-y: auto; + position: absolute; + border: 1px solid scale-color-diff(); + background-color: $secondary; + z-index: 100; + + a.badge-category { + font-size: 13px; + font-weight: bold; + padding: 4px 0; + float: none; + line-height: 19px; + text-transform: none; + width: 100%; + min-width: 102px; + text-align: center; + margin-right: 20px; + margin-bottom: 7px; + } +} + .fa-thumb-tack.unpinned { @include fa-icon-rotate(315deg, 1); color: $primary; diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss index 051444029ce..6ae67b243e2 100644 --- a/app/assets/stylesheets/desktop/poster_expansion.scss +++ b/app/assets/stylesheets/desktop/poster_expansion.scss @@ -99,7 +99,7 @@ } .badge-section { - margin-top: 20px; + margin-top: 10px; h3 { line-height: 43px; color: $primary; @@ -110,7 +110,9 @@ .more-user-badges { @extend .user-badge; - padding: 4px 8px; + padding: 3px 8px; + line-height: 19px; + font-size: 13px; } } } diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss index 0a6641c73d1..f1c8e5de077 100644 --- a/app/assets/stylesheets/desktop/topic-list.scss +++ b/app/assets/stylesheets/desktop/topic-list.scss @@ -38,60 +38,19 @@ } -#navigation-bar { - .has-icon span:before { - margin-right: 4px; - font: 15px/0.9 "FontAwesome"; - } - .has-icon .starred:before { - content: "\f005"; - } - .has-icon .unread:before { - content: "\f02e"; - } -} // Base list // -------------------------------------------------- #topic-list { - width: 100%; - border-collapse: separate; - border-spacing: 0; margin: 0 0 10px; - border-top: 1px solid scale-color-diff(); .fa-thumb-tack {color: $primary;} .fa-thumb-tack.unpinned {color: $primary;} - a.title {color: $primary;} a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);} - - > tbody > tr { - &:nth-child(even) { - background-color: darken($secondary, 3%); - } - &.archived a { - opacity: 0.6; - } - &.has-excerpt .star { - vertical-align: top; - margin-top: 2px; - } - &.category-description { - td { - color: $danger; - } - } - &.highlighted { - background-color: scale-color($tertiary, $lightness: 85%); - } - } th, td { padding: 12px 5px; - line-height: 1.25; - text-align: left; - vertical-align: middle; &:first-of-type { padding-left: 10px; } @@ -100,16 +59,9 @@ } } th { - color: scale-color($primary, $lightness: 50%); - font-weight: normal; - font-size: 14px; button i.fa {color: scale-color($primary, $lightness: 50%);} + } - } - td { - color: scale-color($primary, $lightness: 50%); - font-size: 14px; - } button.bulk-select { padding: 0; @@ -131,33 +83,8 @@ } .main-link { width: 495px; - font-size: 16px; - - i.score { - color: $success; - cursor: pointer; - } } - .topic-excerpt { - font-size: 13px; - margin-top: 8px; - color: scale-color($primary, $lightness: 50%); - word-break: break-word; - line-height: 1.4; - } - - .topic-statuses:empty { - display: none; - } - .topic-status { - margin-right: 4px; - padding: 0; - font-size: 15px; - &:last-of-type { - margin-right: 0; - } - } .badge-notification { position: relative; top: -2px; @@ -186,15 +113,7 @@ @include box-shadow(0 0 6px 1px desaturate(scale-color($tertiary, $lightness: 30%), 35%)); } } - .num { - text-align: center; - a:not(.badge-posts) { - color: inherit; - } - a.badge-posts { - font-weight: bold; - } - } + .sortable { cursor: pointer; &:hover { @@ -262,36 +181,14 @@ vertical-align: top; padding: 8px; } - td.category { - vertical-align: top; - padding-top: 15px; - padding-bottom: 15px; - border-left: 6px solid; - } - td.stats { - .unit { - font-size: 11px; - } - } - table.categoryStats { - td { - padding: 2px; - vertical-align: bottom; - line-height: 24px; - &.value { text-align: right; font-size: 20px; } - &.unit { text-align: left; } - } - } .last-user-info { font-size: 12px; } - .has-description { td.category { padding-top: 15px; } } - .category{ position: relative; width: 45%; @@ -335,193 +232,36 @@ } } - - - // Category list // -------------------------------------------------- - .category-list-item { - margin-bottom: 10px; - #topic-list tbody tr:nth-child(even) { - background-color: darken($secondary, 3%); - } th .badge-category { float: left; - margin: 1px 4px 0 0; } .posters { - float: left; display: block; width: 165px; } - > footer { - border: 1px solid scale-color-diff(); - border-top: 0; - padding: 7px 10px; - background-color: scale-color-diff(); - figure { - float: left; - margin: 3px 7px 0 0; - color: scale-color($primary, $lightness: 10%); - font-weight: bold; - font-size: 12px; - } - figcaption { - display: inline; - font-weight: normal; - } - .btn { - float: right; - margin-left: 7px; - } - } } -// Loading -// -------------------------------------------------- - -// List - -.loading #topic-list { - border: 0; - @include box-shadow(none); - tr { - background-color: transparent; - } -} - -// Topics - #topic-list-bottom { margin: 20px 0; } -.topics-loading { - width: 200px; - margin: 0 auto; - padding: 10px 0 10px 43px; - color: $secondary; - font-size: 18px; - line-height: 25px; - background: { - color: #000; - image: image-url("spinner_96_w.gif"); - repeat: no-repeat; - position: 10px 50%; - size: 25px; - }; - @include border-radius-all(12px); -} - // Misc. stuff // -------------------------------------------------- -.list-controls { - - .home { - background-color: scale-color-diff(); - color: $primary; - } - - .badge-category { - padding: 4px 10px; - display: inline-block; - line-height: 24px; - float: left; - } - .category-dropdown-button { - border-left: 1px solid rgba(0,0,0,0.15); - font-size: 16px; - width: 10px; - text-align: center; - - &:hover { - opacity: 0.8; - } - } - clear: both; -} #list-area { - margin-bottom: 300px; - h2 { margin: 20px 0 10px; } - - - .empty-topic-list { - padding: 10px; - } - .unseen { - background-color: transparent; - padding: 0; - border: 0; - color: scale-color($danger, $lightness: 20%); - font-size: 13px; - cursor: default; - } -} -#topic-list { - .alert { - margin-bottom: 0; - font-size: 14px; - } - .spinner { - margin-top: 40px; - } -} -span.posted { - display: inline-block; - text-indent: -9999em; - width: 15px; - height: 15px; - background: { - image: image-url("posted.png"); - }; -} - -ol.category-breadcrumb { - display: block; - float: left; - list-style: none; - margin: 0 10px 0 0; - padding: 0; - - li { - float: left; - margin-right: 5px; - } } .category-dropdown-menu { - overflow-x: hidden; - overflow-y: auto; - position: absolute; - border: 1px solid scale-color-diff(); - background-color: $secondary; max-height: 350px; - padding: 8px 7px 0 7px; - z-index: 100; margin-top: 30px; min-width: 138px; - - - a.badge-category { - font-size: 13px; - font-weight: bold; - padding: 4px 0; - float: none; - line-height: 19px; - text-transform: none; - width: 100%; - min-width: 102px; - text-align: center; - margin-right: 20px; - margin-bottom: 7px; - } - } #bulk-select { diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 4c706f2e4b4..c0895b12efe 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -20,19 +20,6 @@ } } -#navigation-bar { - .has-icon span:before { - margin-right: 4px; - font: 15px/0.9 "FontAwesome"; - } - .has-icon .starred:before { - content: "\f005"; - } - .has-icon .unread:before { - content: "\f02e"; - } -} - .list-container .full-width { margin-left: 0; } @@ -41,34 +28,9 @@ // -------------------------------------------------- #topic-list { - width: 100%; - border-collapse: separate; - border-spacing: 0; - border-top: 1px solid scale-color-diff(); - - > tbody > tr { - background-color: $secondary; - &:nth-child(even) { - background-color: darken($secondary, 4%); - } - &.archived a { - opacity: 0.6; - } - &.category-description { - td { - color: #000; - } - } - &.highlighted { - background-color: scale-color($tertiary, $lightness: 75%); - } - } th, td { padding: 7px 5px; - line-height: 1.25; - text-align: left; - vertical-align: middle; color: scale-color($primary, $lightness: 50%); &:first-of-type { padding-left: 5px; @@ -78,9 +40,6 @@ } } th { - color: scale-color($primary, $lightness: 50%); - font-weight: bold; - font-size: 13px; &:first-of-type { @include border-radius-all(4px 0 0 0); } @@ -88,38 +47,10 @@ @include border-radius-all(0 4px 0 0); } } - td { - font-size: 14px; - } a.title {color: $primary;} a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);} - .main-link { - font-size: 16px; - i.score { - color: $success; - cursor: pointer; - } - } - - .topic-excerpt { - font-size: 14px; - margin-top: 8px; - color: scale-color($primary, $lightness: 50%); - word-break: break-word; - } - - .topic-statuses:empty { - display: none; - } - .topic-status { - margin-right: 4px; - padding: 0; - &:last-of-type { - margin-right: 0; - } - } .badge-notification { position: relative; padding: 4px 4px 4px 3px; @@ -154,13 +85,6 @@ font-weight: bold; } - .num { - text-align: center; - a:not(.badge-posts) { - color: inherit; - } - } - .age { white-space: nowrap; } @@ -174,11 +98,7 @@ vertical-align: top; padding: 5px; } - td.category { - vertical-align: top; - padding-top: 15px; - padding-bottom: 15px; - } + .badge-category { display: inline-block; margin-top: 1px; @@ -211,156 +131,30 @@ @include not-tablet-landscape { display: none; } @include tablet-landscape { min-width: 80px; } } - td.stats { - .unit { - font-size: 11px; - } - } - table.categoryStats { - td { - padding: 2px; - vertical-align: bottom; - line-height: 17px; - &.value { text-align: right; } - &.unit { text-align: left; } - } - } } .category-list-item { - margin-bottom: 10px; - #topic-list tbody tr:nth-child(even) { - background-color: $secondary; - } - .badge-category { - margin: 1px 4px 0 0; - } .posters { - float: left; display: none; } - > footer { - border-bottom: 1px solid scale-color-diff(); - border-top: 0; - padding: 7px 10px; - background-color: scale-color($primary, $lightness: 95%); - figure { - float: left; - margin: 3px 7px 0 0; - color: scale-color($primary, $lightness: 10%); - font-weight: bold; - font-size: 12px; - } - figcaption { - display: inline; - font-weight: normal; - } - .btn { - float: right; - margin-left: 7px; - } - } } -// Loading -// -------------------------------------------------- - -// List - -.loading #topic-list { - border: 0; - @include box-shadow(none); - tr { - background-color: transparent; - } -} - -// Topics - #topic-list-bottom { margin: 20px 12px 0 12px; } -.topics-loading { - width: 200px; - margin: 0 auto; - padding: 10px 0 10px 43px; - color: $secondary; - font-size: 18px; - line-height: 25px; - background: { - color: #000; - image: image-url("spinner_96_w.gif"); - repeat: no-repeat; - position: 10px 50%; - size: 25px; - } - @include border-radius-all(12px); -} // Misc. stuff // -------------------------------------------------- .list-controls { - .home { - color: $primary; - background-color: scale-color-diff(); - } - .badge-category { margin-top: 6px; - padding: 4px 10px; - display: inline-block; - line-height: 24px; - float: left; } .category-dropdown-button { padding: 4px 10px 4px 8px; - border-left: 1px solid rgba(0, 0, 0, 0.15); - font-size: 16px; - width: 10px; - text-align: center; - - &:hover { - opacity: 0.8; - } - } - clear: both; -} - -#list-area { - margin-bottom: 300px; - .empty-topic-list { - padding: 10px; - } - .unseen { - background-color: transparent; - padding: 0; - border: 0; - color: scale-color($danger, $lightness: 20%); - font-size: 13px; - cursor: default; } } -#topic-list { - .alert { - margin-bottom: 0; - font-size: 14px; - } - .spinner { - margin-top: 40px; - } -} -span.posted { - display: inline-block; - text-indent: -9999em; - width: 15px; - height: 15px; - background: { - image: image-url("posted.png"); - } -} - .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { @@ -435,34 +229,19 @@ span.posted { } ol.category-breadcrumb { - display: block; - float: left; - list-style: none; - margin: 5px 10px 0 0; - padding: 0; - li { - float: left; - margin-right: 5px; - } + margin: 5px 10px 0 0; + } .category-dropdown-menu { - overflow-x: hidden; - overflow-y: auto; - position: absolute; - border: 1px solid scale-color-diff(); - background-color: $secondary; height: 200px; padding: 8px 5px 0 7px; - z-index: 100; margin-top: 31px; - .badge-category { - font-size: 13px; + a.badge-category { line-height: 26px; padding: 0 8px; - float: none; } div {