mirror of
https://github.com/ENSL/ensl.org.git
synced 2024-11-15 01:11:23 +00:00
New header layout
Improves spacing Improves button layout on forums
This commit is contained in:
parent
2bd9376076
commit
3e757e2d76
16 changed files with 122 additions and 120 deletions
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<h1>Edit poll</h1>
|
||||
<h1>Edit Poll</h1>
|
||||
|
||||
<%= render :partial => "form" %>
|
||||
<%= render partial: 'form' %>
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
<h1>Editing post</h1>
|
||||
|
||||
<%= render :partial => "form" %>
|
||||
|
||||
<%= link_to 'Back to topic', @post.topic, class: 'button tiny' %>
|
||||
<%= render partial: 'form' %>
|
||||
|
|
|
@ -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 %>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue