github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 02:20:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

first steps to making discourse more responsive

Browse Source
This commit is contained in:
Kris Aubuchon 2014-07-09 19:56:35 -04:00
parent e84e72dfcd
commit 291459bb91
10 changed files with 192 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -3,8 +3,6 @@
@import "common/foundation/mixins"; @import "common/foundation/mixins";
@import "common/foundation/helpers"; @import "common/foundation/helpers";
.admin-contents table { .admin-contents table {
width: 100%; width: 100%;
tr {text-align: left;} tr {text-align: left;}
@ -172,7 +170,7 @@ td.flaggers td {
} }
.site-settings-nav { .site-settings-nav {
width: 200px; width: 18.018%;
margin-top: 30px; margin-top: 30px;
.nav-stacked { .nav-stacked {
border-right: none; border-right: none;
@ -184,9 +182,7 @@ td.flaggers td {
} }
.site-settings-detail { .site-settings-detail {
width: 850px; width: 76.5765%;
@include medium-width { width: 740px; }
@include small-width { width: 700px; }
min-height: 800px; min-height: 800px;
margin-left: 0; margin-left: 0;
border-left: solid 1px scale-color-diff(); border-left: solid 1px scale-color-diff();
@ -199,16 +195,12 @@ td.flaggers td {
.setting-label { .setting-label {
float: left; float: left;
width: 196px; width: 17.6576%;
@include medium-width { width: 176px; }
@include small-width { width: 166px; }
margin-right: 12px; margin-right: 12px;
} }
.setting-value { .setting-value {
float: left; float: left;
width: 450px; width: 53%;
@include medium-width { width: 360px; }
@include small-width { width: 330px; }
.select2-container { .select2-container {
width: 100%; width: 100%;
} }
@ -218,7 +210,6 @@ td.flaggers td {
} }
.setting-controls { .setting-controls {
float: left; float: left;
width: 144px;
} }
.input-setting-string { .input-setting-string {
width: 404px; width: 404px;
@ -328,7 +319,7 @@ section.details {
} }
.field { .field {
font-weight: bold; font-weight: bold;
width: 196px; width: 17.65765%;
float: left; float: left;
margin-left: 12px; margin-left: 12px;
} }
@ -443,7 +434,7 @@ section.details {
padding-left: 10px; padding-left: 10px;
width: 65%; width: 65%;
.style-name { .style-name {
width: 600px; width: 54.0540%;
height: 25px; height: 25px;
font-size: 20px; font-size: 20px;
} }
@ -538,21 +529,13 @@ section.details {
.dashboard-left { .dashboard-left {
float: left; float: left;
width: 500px; width: 60%;
margin-top: 10px;
} }
.dashboard-right { .dashboard-right {
float: right; float: right;
width: 500px;
margin-top: 10px; margin-top: 10px;
margin-right: 15px; width: 40%;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
.dashboard-stats { .dashboard-stats {
width: 100%; width: 100%;
@ -623,9 +606,7 @@ table.api-keys {
.dashboard-stats { .dashboard-stats {
margin-bottom: 30px; margin-bottom: 30px;
width: 460px; margin-right: 40px;
margin-left: 30px;
h4 { h4 {
font-weight: normal; font-weight: normal;
margin-bottom: 8px; margin-bottom: 8px;
@ -706,7 +687,7 @@ table.api-keys {
.problem-messages { .problem-messages {
float: left; float: left;
width: 395px; width: 75%;
a { a {
text-decoration: underline; text-decoration: underline;
} }
@ -756,17 +737,9 @@ table.api-keys {
.commits-widget { .commits-widget {
border: solid 1px scale-color-diff(); border: solid 1px scale-color-diff();
width: 500px;
height: 180px; height: 180px;
margin-bottom: 36px; margin-bottom: 36px;
@include medium-width {
width: 430px;
}
@include small-width {
width: 390px;
}
ul, li { ul, li {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -900,10 +873,8 @@ table.api-keys {
min-height: 500px; min-height: 500px;
float: left; float: left;
width: 760px; width: 54.0540%;
@include medium-width { width: 650px; } margin-left: 1.8018%;
@include small-width { width: 600px; }
margin-left: 20px;
p.description { p.description {
color: $primary; color: $primary;
@ -971,7 +942,7 @@ table.api-keys {
} }
.action, .match_count, .last_match_at, .created_at { .action, .match_count, .last_match_at, .created_at {
text-align: center; text-align: center;
width: 110px; width: 9.9099%;
} }
} }
@ -979,13 +950,12 @@ table.api-keys {
margin-left: 6px; margin-left: 6px;
.combobox { .combobox {
width: 130px; width: 130px;
top: 10px;
} }
} }
.screened-emails, .screened-urls { .screened-emails, .screened-urls {
.ip_address { .ip_address {
width: 110px; width: 9.9099%;
text-align: center; text-align: center;
} }
} }
@ -1009,19 +979,19 @@ table.api-keys {
.staff-actions { .staff-actions {
width: 100%; width: 100%;
.action { .action {
width: 120px; width: 10.810%;
} }
.staff_user { .staff_user {
width: 100px; width: 9.009%;
} }
.subject { .subject {
width: 200px; width: 18.018%;
} }
.created_at { .created_at {
width: 50px; width: 4.5045%;
} }
.context { .context {
width: 200px; width: 18.018%;
} }
.created_at { .created_at {
text-align: center; text-align: center;
@ -1164,3 +1134,12 @@ button.ru {
.invisible { .invisible {
visibility: hidden; 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}
}
}

37
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -75,6 +75,7 @@
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
word-wrap: break-word; word-wrap: break-word;
line-height: 1.4; line-height: 1.4;
padding-right: 20px;
} }
.topic-statuses:empty { .topic-statuses:empty {
display: none; display: none;
@ -103,28 +104,28 @@
#topic-list.categories { #topic-list.categories {
td.category { td.category {
vertical-align: top; vertical-align: top;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-left: 6px solid; border-left: 6px solid;
}
td.stats {
.unit {
font-size: 11px;
} }
} td.stats {
.unit {
table.categoryStats { font-size: 11px;
td {
padding: 2px;
vertical-align: bottom;
line-height: 24px;
&.value { text-align: right; font-size: 20px; }
&.unit { text-align: left; }
} }
} }
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 { .category-list-item {

19
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -5,26 +5,9 @@
// Media queries // 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 { @mixin small-width {
@media screen and (max-width: 966px) { @media screen and (max-width: 850px) {
@content; @content;
} }
} }

2
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -5,7 +5,7 @@
// Layout dimensions // Layout dimensions
// -------------------------------------------------- // --------------------------------------------------
$small-width: 950px !default; $small-width: 800px !default;
$medium-width: 995px !default; $medium-width: 995px !default;
$large-width: 1110px !default; $large-width: 1110px !default;

23
app/assets/stylesheets/desktop/discourse.scss
View File

@ -4,18 +4,6 @@
html {font-size: 14px/19px;} html {font-size: 14px/19px;}
body {
min-width: $large-width;
}
.container {
max-width: $large-width;
}
.full-width {
width: $large-width;
}
@include medium-width { @include medium-width {
body { body {
min-width: $medium-width; min-width: $medium-width;
@ -26,14 +14,13 @@ body {
} }
} }
@include small-width { @include small-width {
body { body {
min-width: $small-width; min-width: 760px;
} }
.container, .container,
.full-width { .full-width {
width: $small-width; min-width: 760px;
} }
} }
@ -484,7 +471,7 @@ body {
} }
} }
/* bootstrap colums */ /* bootstrap columns */
.row:before, .row:before,
.row:after { .row:after {
@ -505,7 +492,7 @@ body {
float: left; float: left;
} }
.span13 { .span13 {
width: 664px; width: 59.8198%;
float: left; float: left;
} }
.span10 { .span10 {
@ -517,7 +504,7 @@ body {
float: left; float: left;
} }
.span6 { .span6 {
width: 300px; width: 27.027%;
float: left; float: left;
} }
.span4 { .span4 {

84
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -296,3 +296,87 @@ button.dismiss-read {
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 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;
}
}
}
}

49
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -536,10 +536,7 @@ iframe {
.extra-info-wrapper { .extra-info-wrapper {
float: left; float: left;
width: 76%; width: 46%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.topic-statuses { .topic-statuses {
i { color: $header_primary; } 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 { .extra-info {
h1 { h1 {
margin: 5px 0 0 0; margin: 5px 0 0 0;
font-size: 1.6em; font-size: 1.6em;
line-height: 1.3em; line-height: 1.3em;
width: 820px;
} }
@ -744,7 +731,6 @@ blockquote > *:last-child {
.gutter { .gutter {
float: left; float: left;
width: 19%;
margin-top: 15px; margin-top: 15px;
padding-left: 15px; padding-left: 15px;
@ -1069,3 +1055,34 @@ span.highlighted {
-webkit-transition: opacity 1s ease-out; -webkit-transition: opacity 1s ease-out;
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;
}
}
}

15
app/assets/stylesheets/desktop/topic.scss
View File

@ -64,7 +64,7 @@
.private-message-glyph { .private-message-glyph {
color: scale-color($primary, $lightness: 75%); color: scale-color($primary, $lightness: 75%);
float: left; float: left;
margin: 0 5px 0 0; margin: 0 5px 0 0;
} }
.private_message #topic-title .private-message-glyph { display: inline; } .private_message #topic-title .private-message-glyph { display: inline; }
@ -290,3 +290,16 @@ kbd
margin: 0 .1em; margin: 0 .1em;
padding: .1em .6em; padding: .1em .6em;
} }
@media only screen
and (max-width : 850px) {
.gutter {
display: none;
}
#topic-progress, #topic-progress-expanded {
left: 210px;
}
}

18
app/assets/stylesheets/desktop/user.scss
View File

@ -76,8 +76,8 @@
} }
.user-navigation { .user-navigation {
width: 240px; width: 21.62%;
margin-right: 20px; margin-right: 1.8018%;
float: left; float: left;
h3 { h3 {
@ -88,17 +88,11 @@
} }
.user-main { .user-main {
width: 850px;
width: 76.5765%;
float: left; float: left;
margin-bottom: 50px; margin-bottom: 50px;
@include medium-width {
width: 735px;
}
@include small-width {
width: 680px;
}
table.group-members { table.group-members {
width: 100%; width: 100%;
@ -231,8 +225,8 @@
float: right; float: right;
background-color: rgba(scale-color($primary, $lightness: 20%), .9); background-color: rgba(scale-color($primary, $lightness: 20%), .9);
text-align: right; text-align: right;
padding: 0 20px; padding: 0 10px;
max-width: 165px; max-width: 20%;
dd { dd {
margin: 0 0 7px 0; margin: 0 0 7px 0;

2
app/views/layouts/_head.html.erb
View File

@ -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="author" content="">
<meta name="generator" content="Discourse <%= Discourse::VERSION::STRING %> - https://github.com/discourse/discourse version <%= Discourse.git_version %>"> <meta name="generator" content="Discourse <%= Discourse::VERSION::STRING %> - https://github.com/discourse/discourse version <%= Discourse.git_version %>">