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

Flatter design on User Page

Browse Source 
- Cleanup of the design ( remove border-radius ... )
- Fixed some alignment and width in mobile and lower screen size
This commit is contained in:
Gilles Manzato 2013-11-01 15:27:01 +01:00
parent 57d78aaba6
commit 3826e67007
4 changed files with 60 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/common/components/navs.css.scss
View File

@ -56,7 +56,6 @@
padding: 0;
overflow: hidden;
background-color: $nav-stacked-background-color;
@include border-radius-all(4px);
@include box-shadow(0 1px 0 $white);
> li {
border-bottom: 1px solid $nav-stacked-divider-color;
@ -66,16 +65,15 @@
> a {
margin: 0;
padding: 13px 13px 13px 30px;
font-weight: bold;
font-size: 16px;
line-height: 20px;
cursor: pointer;
color: $nav-stacked-color;
}
}
.active > a,
.active .icon-chevron-right {
color: $nav-stacked-border-color-active;
text-shadow: 0 1px 0 rgba($white, 0.5);
color: $white;
background-color: $nav-stacked-background-color-active;
}
.count {

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

@ -71,12 +71,13 @@ $nav-pills-background-color-active: #e45735 !default;
// Stacked nav
$nav-stacked-color: #534d4b !default;
$nav-stacked-border-color: #ccc !default;
$nav-stacked-background-color: #fafafa !default;
$nav-stacked-divider-color: #e6e6e6 !default;
$nav-stacked-chevron-color: #ccc !default;
$nav-stacked-border-color-active: #f15b22 !default;
$nav-stacked-background-color-active: #f9e7e0 !default;
$nav-stacked-background-color-active: #e45735 !default;
// Button nav

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

@ -40,7 +40,6 @@
color: $darkish_gray;
}
.warning {
@include border-radius-all(6px);
background-color: lighten($red, 10%);
padding: 5px 8px;
color: $white;
@ -110,16 +109,16 @@
}
.user-main {
width: 840px;
width: 850px;
float: left;
margin-bottom: 50px;
@include medium-width {
width: 730px;
width: 735px;
}
@include small-width {
width: 650px;
width: 680px;
}
.user-content {
@ -127,21 +126,18 @@
background-color: white;
border: 1px solid #ddd;
margin-bottom: 10px;
@include border-radius-all(4px);
}
.about {
background-color: #444;
margin-bottom: 10px;
overflow: hidden;
border: 1px solid #bbb;
color: #fff;
@include border-radius-all(4px);
.details {
text-align: center;
padding: 10px;
padding: 12px;
h1 {
@ -188,11 +184,12 @@
text-align: right;
padding: 0 10px;
width: 20%;
@include border-radius-all(4px);
dd {
color: white;
margin: 0 0 7px 0;
overflow: hidden;
text-overflow: ellipsis;
}
dt {
color: #aaa;
@ -203,9 +200,8 @@
.controls {
background-color: #ddd;
margin-top: 10px;
padding: 5px;
height: 32px;
padding: 12px;
height: 30px;
.right {
float: right;
@ -273,7 +269,6 @@
background-color: white;
border: 1px solid #ddd;
margin-bottom: 10px;
@include border-radius-all(4px);
}
.type {
color: lighten($black, 40%);

59
app/assets/stylesheets/mobile/user.scss
View File

@ -47,7 +47,6 @@
width: 220px;
min-height: 200px;
background-color: #f8f8f8;
border-radius: 5px;
color: #444;
word-wrap: break-word;
}
@ -56,8 +55,12 @@
h3 {
color: #666;
padding-left: 5px;
}
.nav-stacked {
border-left: 0;
border-right: 0;
}
.summary {
height: 50px;
}
@ -112,11 +115,8 @@
background-color: #444;
margin-bottom: 10px;
overflow: hidden;
border: 1px solid #bbb;
color: #fff;
@include border-radius-all(4px);
.details {
text-align: center;
padding: 10px;
@ -145,7 +145,6 @@
background-color: #222;
text-align: left;
padding: 0 10px;
@include border-radius-all(4px);
dd {
color: white;
@ -161,9 +160,49 @@
.controls {
background-color: #ddd;
margin-top: 0px;
padding: 5px;
padding: 10px 10px 0 10px;
button { margin-bottom: 3px; }
.btn {
margin-bottom: 10px;
float: none;
}
}
}
.about.collapsed-info {
.controls {
margin-top: 0;
}
.details {
.secondary { display: none; }
.bio { display: none; }
.primary {
width: 100%;
text-align: left;
margin-top: 4px;
.avatar {
float: left;
margin-right: 10px;
border: 2px solid white;
width: 45px;
height: 45px;
}
h1 {
margin:0;
font-size: 20px;
line-height: 22px;
}
h2 {
font-size: 17px;
line-height: 16px;
margin-top: 4px;
}
}
}
}
@ -188,9 +227,7 @@
.item {
padding: 10px 8px;
background-color: white;
border: 1px solid #b9b9b9;
margin-bottom: 10px;
@include border-radius-all(4px);
border-bottom: 1px solid #b9b9b9;
}
.type {
color: lighten($black, 40%);