mirror of
https://github.com/discourse/discourse.git
synced 2024-11-23 23:54:16 +08:00
first steps to making discourse more responsive
This commit is contained in:
Kris Aubuchon
parent
e84e72dfcd
commit
291459bb91
|
|
@ -3,8 +3,6 @@
|
|||
@import "common/foundation/mixins";
|
||||
@import "common/foundation/helpers";
|
||||
|
||||
|
||||
|
||||
.admin-contents table {
|
||||
width: 100%;
|
||||
tr {text-align: left;}
|
||||
|
|
@ -172,7 +170,7 @@ td.flaggers td {
|
|||
}
|
||||
|
||||
.site-settings-nav {
|
||||
width: 200px;
|
||||
width: 18.018%;
|
||||
margin-top: 30px;
|
||||
.nav-stacked {
|
||||
border-right: none;
|
||||
|
|
@ -184,9 +182,7 @@ td.flaggers td {
|
|||
}
|
||||
|
||||
.site-settings-detail {
|
||||
width: 850px;
|
||||
@include medium-width { width: 740px; }
|
||||
@include small-width { width: 700px; }
|
||||
width: 76.5765%;
|
||||
min-height: 800px;
|
||||
margin-left: 0;
|
||||
border-left: solid 1px scale-color-diff();
|
||||
|
|
@ -199,16 +195,12 @@ td.flaggers td {
|
|||
|
||||
.setting-label {
|
||||
float: left;
|
||||
width: 196px;
|
||||
@include medium-width { width: 176px; }
|
||||
@include small-width { width: 166px; }
|
||||
width: 17.6576%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.setting-value {
|
||||
float: left;
|
||||
width: 450px;
|
||||
@include medium-width { width: 360px; }
|
||||
@include small-width { width: 330px; }
|
||||
width: 53%;
|
||||
.select2-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -218,7 +210,6 @@ td.flaggers td {
|
|||
}
|
||||
.setting-controls {
|
||||
float: left;
|
||||
width: 144px;
|
||||
}
|
||||
.input-setting-string {
|
||||
width: 404px;
|
||||
|
|
@ -328,7 +319,7 @@ section.details {
|
|||
}
|
||||
.field {
|
||||
font-weight: bold;
|
||||
width: 196px;
|
||||
width: 17.65765%;
|
||||
float: left;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
@ -443,7 +434,7 @@ section.details {
|
|||
padding-left: 10px;
|
||||
width: 65%;
|
||||
.style-name {
|
||||
width: 600px;
|
||||
width: 54.0540%;
|
||||
height: 25px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -538,21 +529,13 @@ section.details {
|
|||
|
||||
.dashboard-left {
|
||||
float: left;
|
||||
width: 500px;
|
||||
margin-top: 10px;
|
||||
width: 60%;
|
||||
}
|
||||
.dashboard-right {
|
||||
float: right;
|
||||
width: 500px;
|
||||
margin-top: 10px;
|
||||
margin-right: 15px;
|
||||
width: 40%;
|
||||
|
||||
@include medium-width {
|
||||
width: 430px;
|
||||
}
|
||||
@include small-width {
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.dashboard-stats {
|
||||
width: 100%;
|
||||
|
|
@ -623,9 +606,7 @@ table.api-keys {
|
|||
|
||||
.dashboard-stats {
|
||||
margin-bottom: 30px;
|
||||
width: 460px;
|
||||
margin-left: 30px;
|
||||
|
||||
margin-right: 40px;
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -706,7 +687,7 @@ table.api-keys {
|
|||
|
||||
.problem-messages {
|
||||
float: left;
|
||||
width: 395px;
|
||||
width: 75%;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -756,17 +737,9 @@ table.api-keys {
|
|||
|
||||
.commits-widget {
|
||||
border: solid 1px scale-color-diff();
|
||||
width: 500px;
|
||||
height: 180px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
@include medium-width {
|
||||
width: 430px;
|
||||
}
|
||||
@include small-width {
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -900,10 +873,8 @@ table.api-keys {
|
|||
min-height: 500px;
|
||||
|
||||
float: left;
|
||||
width: 760px;
|
||||
@include medium-width { width: 650px; }
|
||||
@include small-width { width: 600px; }
|
||||
margin-left: 20px;
|
||||
width: 54.0540%;
|
||||
margin-left: 1.8018%;
|
||||
|
||||
p.description {
|
||||
color: $primary;
|
||||
|
|
@ -971,7 +942,7 @@ table.api-keys {
|
|||
}
|
||||
.action, .match_count, .last_match_at, .created_at {
|
||||
text-align: center;
|
||||
width: 110px;
|
||||
width: 9.9099%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -979,13 +950,12 @@ table.api-keys {
|
|||
margin-left: 6px;
|
||||
.combobox {
|
||||
width: 130px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.screened-emails, .screened-urls {
|
||||
.ip_address {
|
||||
width: 110px;
|
||||
width: 9.9099%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1009,19 +979,19 @@ table.api-keys {
|
|||
.staff-actions {
|
||||
width: 100%;
|
||||
.action {
|
||||
width: 120px;
|
||||
width: 10.810%;
|
||||
}
|
||||
.staff_user {
|
||||
width: 100px;
|
||||
width: 9.009%;
|
||||
}
|
||||
.subject {
|
||||
width: 200px;
|
||||
width: 18.018%;
|
||||
}
|
||||
.created_at {
|
||||
width: 50px;
|
||||
width: 4.5045%;
|
||||
}
|
||||
.context {
|
||||
width: 200px;
|
||||
width: 18.018%;
|
||||
}
|
||||
.created_at {
|
||||
text-align: center;
|
||||
|
|
@ -1164,3 +1134,12 @@ button.ru {
|
|||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-width : 850px) {
|
||||
.nav-stacked {
|
||||
.glyph {width: auto; position: relative;}
|
||||
.fa-chevron-right {display: none;}
|
||||
> li > a {padding: 13px}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
color: scale-color($primary, $lightness: 50%);
|
||||
word-wrap: break-word;
|
||||
line-height: 1.4;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.topic-statuses:empty {
|
||||
display: none;
|
||||
|
|
@ -103,28 +104,28 @@
|
|||
|
||||
#topic-list.categories {
|
||||
|
||||
td.category {
|
||||
vertical-align: top;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-left: 6px solid;
|
||||
}
|
||||
td.stats {
|
||||
.unit {
|
||||
font-size: 11px;
|
||||
td.category {
|
||||
vertical-align: top;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-left: 6px solid;
|
||||
}
|
||||
}
|
||||
|
||||
table.categoryStats {
|
||||
td {
|
||||
padding: 2px;
|
||||
vertical-align: bottom;
|
||||
line-height: 24px;
|
||||
&.value { text-align: right; font-size: 20px; }
|
||||
&.unit { text-align: left; }
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -5,26 +5,9 @@
|
|||
// Media queries
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin small-height {
|
||||
@media screen and (max-height: 444px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin regular-height {
|
||||
@media screen and (min-height: 445px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin not-small-width {
|
||||
@media screen and (min-width: 967px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin small-width {
|
||||
@media screen and (max-width: 966px) {
|
||||
@media screen and (max-width: 850px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Layout dimensions
|
||||
// --------------------------------------------------
|
||||
|
||||
$small-width: 950px !default;
|
||||
$small-width: 800px !default;
|
||||
$medium-width: 995px !default;
|
||||
$large-width: 1110px !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,18 +4,6 @@
|
|||
|
||||
html {font-size: 14px/19px;}
|
||||
|
||||
body {
|
||||
min-width: $large-width;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $large-width;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: $large-width;
|
||||
}
|
||||
|
||||
@include medium-width {
|
||||
body {
|
||||
min-width: $medium-width;
|
||||
|
|
@ -26,14 +14,13 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@include small-width {
|
||||
body {
|
||||
min-width: $small-width;
|
||||
min-width: 760px;
|
||||
}
|
||||
.container,
|
||||
.full-width {
|
||||
width: $small-width;
|
||||
min-width: 760px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -484,7 +471,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
/* bootstrap colums */
|
||||
/* bootstrap columns */
|
||||
|
||||
.row:before,
|
||||
.row:after {
|
||||
|
|
@ -505,7 +492,7 @@ body {
|
|||
float: left;
|
||||
}
|
||||
.span13 {
|
||||
width: 664px;
|
||||
width: 59.8198%;
|
||||
float: left;
|
||||
}
|
||||
.span10 {
|
||||
|
|
@ -517,7 +504,7 @@ body {
|
|||
float: left;
|
||||
}
|
||||
.span6 {
|
||||
width: 300px;
|
||||
width: 27.027%;
|
||||
float: left;
|
||||
}
|
||||
.span4 {
|
||||
|
|
|
|||
|
|
@ -296,3 +296,87 @@ button.dismiss-read {
|
|||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* Tablet (portrait) ----------- */
|
||||
|
||||
@media only screen
|
||||
and (max-width : 850px) {
|
||||
|
||||
.nav-pills {
|
||||
> li > a {
|
||||
font-size: 14px;
|
||||
padding: 5px 10px ;
|
||||
}
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
padding: 0 5px;
|
||||
|
||||
.btn {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.category-dropdown-menu {
|
||||
min-width: 139px;
|
||||
}
|
||||
|
||||
a.badge-category {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#topic-list {
|
||||
.categories td.category {
|
||||
padding-left: 10px;
|
||||
}
|
||||
td:first-of-type {
|
||||
padding: 0;
|
||||
}
|
||||
th:first-of-type {
|
||||
padding: 12px 5px;
|
||||
}
|
||||
th {
|
||||
.btn .fa {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
padding: 12px 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.star {
|
||||
padding: 12px 5px;
|
||||
width: auto;
|
||||
}
|
||||
.main-link {
|
||||
font-size: 15px;
|
||||
padding: 12px 8px 12px 0px;
|
||||
}
|
||||
|
||||
.likes {
|
||||
width: auto;
|
||||
}
|
||||
.category {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.topic-excerpt {
|
||||
padding-right: 20px;
|
||||
}
|
||||
th.posters {
|
||||
text-align: center;
|
||||
}
|
||||
.posters {
|
||||
|
||||
min-width: 0;
|
||||
width: 50px;
|
||||
a:not(.latest) {
|
||||
display: none;
|
||||
}
|
||||
a.latest {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -536,10 +536,7 @@ iframe {
|
|||
|
||||
.extra-info-wrapper {
|
||||
float: left;
|
||||
width: 76%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 46%;
|
||||
|
||||
.topic-statuses {
|
||||
i { color: $header_primary; }
|
||||
|
|
@ -555,24 +552,14 @@ text-overflow: ellipsis;
|
|||
}
|
||||
|
||||
|
||||
@include medium-width {
|
||||
.extra-info-wrapper {
|
||||
width: 73%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include small-width {
|
||||
.extra-info-wrapper {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
h1 {
|
||||
margin: 5px 0 0 0;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.3em;
|
||||
width: 820px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -744,7 +731,6 @@ blockquote > *:last-child {
|
|||
|
||||
.gutter {
|
||||
float: left;
|
||||
width: 19%;
|
||||
margin-top: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
|
|
@ -1069,3 +1055,34 @@ span.highlighted {
|
|||
-webkit-transition: opacity 1s ease-out;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
|
||||
|
||||
/* Tablet (portrait) ----------- */
|
||||
|
||||
@media only screen
|
||||
and (max-width : 1150px) {
|
||||
.extra-info {
|
||||
h1 {
|
||||
width: 720px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media only screen
|
||||
and (max-width : 975px) {
|
||||
.extra-info {
|
||||
h1 {
|
||||
width: 650px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-width : 870px) {
|
||||
.extra-info {
|
||||
h1 {
|
||||
width: 520px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
.private-message-glyph {
|
||||
color: scale-color($primary, $lightness: 75%);
|
||||
float: left;
|
||||
margin: 0 5px 0 0;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
.private_message #topic-title .private-message-glyph { display: inline; }
|
||||
|
||||
|
|
@ -290,3 +290,16 @@ kbd
|
|||
margin: 0 .1em;
|
||||
padding: .1em .6em;
|
||||
}
|
||||
|
||||
|
||||
@media only screen
|
||||
and (max-width : 850px) {
|
||||
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
#topic-progress, #topic-progress-expanded {
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@
|
|||
}
|
||||
|
||||
.user-navigation {
|
||||
width: 240px;
|
||||
margin-right: 20px;
|
||||
width: 21.62%;
|
||||
margin-right: 1.8018%;
|
||||
float: left;
|
||||
|
||||
h3 {
|
||||
|
|
@ -88,17 +88,11 @@
|
|||
}
|
||||
|
||||
.user-main {
|
||||
width: 850px;
|
||||
|
||||
width: 76.5765%;
|
||||
float: left;
|
||||
margin-bottom: 50px;
|
||||
|
||||
@include medium-width {
|
||||
width: 735px;
|
||||
}
|
||||
|
||||
@include small-width {
|
||||
width: 680px;
|
||||
}
|
||||
|
||||
table.group-members {
|
||||
width: 100%;
|
||||
|
|
@ -231,8 +225,8 @@
|
|||
float: right;
|
||||
background-color: rgba(scale-color($primary, $lightness: 20%), .9);
|
||||
text-align: right;
|
||||
padding: 0 20px;
|
||||
max-width: 165px;
|
||||
padding: 0 10px;
|
||||
max-width: 20%;
|
||||
|
||||
dd {
|
||||
margin: 0 0 7px 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75" />
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="author" content="">
|
||||
<meta name="generator" content="Discourse <%= Discourse::VERSION::STRING %> - https://github.com/discourse/discourse version <%= Discourse.git_version %>">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user