New header layout

Improves spacing
Improves button layout on forums
This commit is contained in:
Luke Barratt 2014-04-30 00:34:48 +01:00
parent 2bd9376076
commit 3e757e2d76
16 changed files with 122 additions and 120 deletions

View file

@ -16,7 +16,7 @@
.comment {
$comment-gutter: 1.4em;
$comment-image-padding: .7em;
$comment-image-padding: 3px;
$comment-image-width: 4em;
$comment-color: $base-font-color;
$comment-background: $light-gray;
@ -27,7 +27,7 @@
width: 100%;
margin-bottom: $base-line-height;
padding-bottom: 1em;
border-bottom: 1px solid transparentize($comment-color, .9);
border-bottom: 1px solid $light-gray;
.comment-image,
.comment-content {

View file

@ -173,20 +173,6 @@
}
}
/*
Gather Status
*/
#gather-status {
@include span-columns(12);
@include flash;
padding: 14px;
text-align: center;
margin-left: - 20px;
width: $max-width + $container-padding*2;
}
/*
Gather Archive
*/

View file

@ -2,7 +2,7 @@
Main Containers
*/
$container-padding: 20px;
$container-padding: 1.5em;
html,
body {
@ -10,11 +10,15 @@ body {
padding: 0;
width: 100%;
min-height: 100%;
background-color: $light-gray;
}
body#tinymce {
padding: 10px;
}
#container {
min-height: 100%;
background-color: $light-gray;
}
.wrapper {
@ -39,6 +43,7 @@ body {
#main {
@include span-columns(9 of 12);
border-radius: $base-border-radius;
box-shadow: $content-shadow;
background: white;
padding: 20px;
@ -68,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
&:before {
content: "";
display: block;
border-top: 2px solid $medium-gray;
border-top: 2px solid $light-gray;
width: 100%;
height: 2px;
position: absolute;

View file

@ -4,36 +4,47 @@
header .banner {
@include linear-gradient($dark-blue, $deep-blue);
height: 250px;
height: 170px;
#logo {
@include span-columns(9 of 12);
min-height: 200px;
min-height: 220px;
position: relative;
img {
height: 180px;
height: 200px;
position: absolute;
top: 15px;
left: 0;
left: -40px;
z-index: 1;
}
}
#authentication {
@include span-columns(3 of 12);
margin-top: 10px;
padding: 10px 0;
padding: 20px 0;
color: white;
.logged {
padding-top: 10px;
}
a {
color: white;
&:hover {
color: $light-blue;
}
}
form {
display: inline;
}
&.admin {
}
.fields {
@include span-columns(12);
@ -62,38 +73,32 @@ header .banner {
float: right;
}
.links,
.profile {
@include span-columns(6);
}
.links {
@include span-columns(7);
position: relative;
h5 {
margin-bottom: 1em;
li {
text-align: right;
}
li i {
display: inline-block;
width: 1em;
text-align: center;
margin-right: 10px;
margin: 0 10px;
}
}
.profile {
@include span-columns(5);
vertical-align: middle;
.avatar {
margin: 0 10px 0 0;
text-align: center;
border-radius: 100px;
padding: 5px;
vertical-align: middle;
position: relative;
width: 100%;
padding-bottom: 100%;
padding-bottom: 96%;
float: left;
height: 0;
@ -103,8 +108,8 @@ header .banner {
height: 100%;
position: absolute;
left: 0;
border-radius: 100px;
padding: 5px;
border-radius: 5px;
padding: 3px;
}
}

View file

@ -9,6 +9,7 @@ $navigation-height: 50px;
font-family: $montserrat;
height: $navigation-height;
margin-top: - $navigation-height;
background: $blue;
nav {
@include outer-container;
@ -16,20 +17,19 @@ $navigation-height: 50px;
}
ul.navigation {
z-index: 100;
position: relative;
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
float: right;
background: transparent;
max-width: $max-width;
max-height: $navigation-height;
> li {
float: left;
width: (100%/7);
border-right: 1px solid transparent;
border-left: 1px solid $dark-blue;
.count {
position: absolute;
@ -51,7 +51,7 @@ ul.navigation {
font-size: 15px;
height: $navigation-height;
line-height: $navigation-height;
padding: 0 20px;
padding: 0 50px 0 20px;
}
> a {
@ -69,23 +69,27 @@ ul.navigation {
background-color: lighten($light-blue, 20);
}
}
&.gathers {
padding-right: 70px;
}
}
&:last-child {
border-right: 0;
border-right: 1px solid $dark-blue;
}
&.icon {
i {
color: lighten($light-blue, 30);
color: white;
max-height: $navigation-height;
position: absolute;
top: 0;
right: 0;
font-size: 24px;
font-size: 18px;
line-height: 1em;
padding: $navigation-height/4;
padding: $navigation-height/3;
}
}
@ -126,6 +130,7 @@ ul.navigation {
white-space: nowrap;
display: block;
color: $navbar-text;
padding: 0 20px;
}
&:hover a {

View file

@ -4,6 +4,7 @@
@include span-columns(12);
box-shadow: $content-shadow;
margin-bottom: $container-padding;
border-radius: $base-border-radius;
padding: 20px;
background: white;
@ -13,7 +14,7 @@
.widget-content-wrapper {
@include span-columns(12);
font-size: 14px;
font-size: 12px;
}
.separator {

View file

@ -17,7 +17,6 @@
float: left;
margin: 0 $button-height/2 $button-height/2 0;
border: 0;
text-transform: uppercase;
cursor: pointer;
font-weight: 400;

View file

@ -3,12 +3,17 @@
*/
#forums {
/*
Buttons
*/
position: relative;
.controls {
@include span-columns(12);
.topic-controls {
position: absolute;
top: 40px;
right: 0;
width: auto;
a:last-child {
margin-right: 0;
}
}
}
@ -29,6 +34,7 @@ div#categories {
.bullet {
width: 10%;
background: {
image: url('layout/forum-category.png');
position: center center;
@ -95,10 +101,7 @@ div#categories {
}
#topic {
.controls {
margin-top: 20px;
}
position: relative;
#reply {
display: none;

View file

@ -28,7 +28,7 @@ table#matches {
*/
div#match {
$title-height: 75px;
$title-height: 100px;
@include span-columns(12);
border-bottom: 3px solid $light-gray;
@ -109,12 +109,12 @@ div#match {
}
.score-1 {
padding-left: $title-height/3;
padding-left: $title-height/5;
left: 0;
}
.score-2 {
padding-right: $title-height/3;
padding-right: $title-height/5;
right: 0;
}
}

View file

@ -4,7 +4,7 @@
div.article {
@include span-columns(12);
border-bottom: 1px solid rgba(35, 35, 35, 0.1);
border-bottom: 3px solid $light-gray;
padding-bottom: 20px;
h1 {
@ -15,10 +15,6 @@ div.article {
@include span-columns(12);
margin-bottom: 40px;
* {
font-family: $open-sans !important;
}
ul {
@extend ul.disc;
}

View file

@ -2,7 +2,9 @@
<%= link_to "Forums", action: "index" %> <%= icon 'chevron-right' %> <%= namelink @forum %>
</div>
<%= render partial: 'controls', locals: { forum: @forum } %>
<div class="topic-controls">
<%= render partial: 'controls', locals: { forum: @forum } %>
</div>
<h2><%=h @forum.title %></h2>

View file

@ -1,14 +1,15 @@
<script type="text/javascript">
$(function() {
$('textarea').tinymce({
mode : "textareas",
theme : "advanced",
plugins : "inlinepopups,contextmenu,nonbreaking,template",
theme_advanced_buttons1 : "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
convert_urls : false
mode: "textareas",
theme: "advanced",
plugins: "inlinepopups,contextmenu,nonbreaking,template",
theme_advanced_buttons1: "bold,italic,blockquote,|,bullist,numlist,|,formatselect,|,link,unlink,image,|,cleanup,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
convert_urls: false,
content_css: '<%= asset_path "application.css" %>'
});
});
</script>

View file

@ -1,3 +1,3 @@
<h1>Edit poll</h1>
<h1>Edit Poll</h1>
<%= render :partial => "form" %>
<%= render partial: 'form' %>

View file

@ -1,5 +1,3 @@
<h1>Editing post</h1>
<%= render :partial => "form" %>
<%= link_to 'Back to topic', @post.topic, class: 'button tiny' %>
<%= render partial: 'form' %>

View file

@ -7,7 +7,7 @@
<%= will_paginate @posts %>
<% end %>
<div class="controls">
<div class="topic-controls">
<% if @newpost.can_create? cuser %>
<%= link_to 'Reply', new_post_path(@newpost, id: @topic), class: 'button' %>
<% end %>

View file

@ -1,43 +1,44 @@
<div class="links">
<h5><%= namelink(cuser) %></h5>
<ul>
<% if cuser.admin? %>
<div class="logged">
<div class="links">
<ul>
<% if cuser.admin? %>
<li>
<%= link_to '/about/adminpanel', class: 'admin' do %>
Admin (<%= Issue.with_status(0).count %>) <%= icon 'wrench' %>
<% end %>
</li>
<% end %>
<li>
<%= link_to '/about/adminpanel', class: 'admin' do %>
<%= icon 'wrench' %> Admin (<%= Issue.with_status(0).count %>)
<%= link_to edit_user_path(cuser) do %>
Account <%= icon 'user' %>
<% end %>
</li>
<% end %>
<li>
<%= link_to edit_user_path(cuser) do %>
<%= icon 'user' %> Account
<% end %>
</li>
<li>
<%= link_to "/users/agenda/#{cuser.id}" do %>
<%= icon 'calendar' %> Agenda
<% end %>
</li>
<li>
<%= link_to messages_path do %>
<%= icon 'envelope' %> Messages
<% end %>
<% if c = cuser.new_messages.count > 0 %>
(<%= cuser.new_messages.count %>)
<% end %>
</li>
<li>
<%= form_tag(controller: "users", action: "logout") do %>
<%= link_to "#", id: "logout" do %>
<%= icon 'key' %> Logout
<li>
<%= link_to "/users/agenda/#{cuser.id}" do %>
Agenda <%= icon 'calendar' %>
<% end %>
<% end %>
</li>
</ul>
</div>
<div class="profile">
<div class="avatar">
<%= image_tag cuser.profile.avatar.url %>
</li>
<li>
<%= link_to messages_path do %>
Messages <%= icon 'envelope' %>
<% end %>
<% if c = cuser.new_messages.count > 0 %>
(<%= cuser.new_messages.count %>)
<% end %>
</li>
<li>
<%= form_tag(controller: "users", action: "logout") do %>
<%= link_to "#", id: "logout" do %>
Logout <%= icon 'key' %>
<% end %>
<% end %>
</li>
</ul>
</div>
</div>
<div class="profile">
<div class="avatar">
<%= image_tag cuser.profile.avatar.url %>
</div>
</div>
</div>