From 0cbaecd5dd5b4a94d75d61a6e4918e6726fa07c7 Mon Sep 17 00:00:00 2001 From: Gibheer Date: Tue, 9 Aug 2011 11:06:53 +0200 Subject: [PATCH] some layout changes --- admin.rb | 14 +++- views/admin_index_no_login.haml | 4 +- views/admin_layout.haml | 11 ++- views/admin_post_change.haml | 10 ++- views/admin_post_edit.haml | 58 +++++++------ views/admin_posts.haml | 3 +- views/admin_stylesheet.scss | 140 +++++++++++++++++++++++++++++++- 7 files changed, 201 insertions(+), 39 deletions(-) diff --git a/admin.rb b/admin.rb index c374244..285ea94 100644 --- a/admin.rb +++ b/admin.rb @@ -3,13 +3,14 @@ class Admin < Sinatra::Base use Rack::Session::Pool, :expire_after => 1800 use Rack::Flash, :accessorize => [:error, :warning, :notice] set :haml, :layout => :admin_layout + register Sinatra::CompassSupport get '/' do haml :admin_index end get '/post' do - @posts = Post.all(:order => [:id.desc]) + @posts = Post.all(:order => [:id.desc], :limit => 15) haml :admin_posts end @@ -88,7 +89,7 @@ class Admin < Sinatra::Base session[:id] = nil session[:last_updated] = nil flash.notice = 'Logout complete' - redirect '/' + redirect '/' end get '/stylesheet.css' do @@ -112,6 +113,15 @@ class Admin < Sinatra::Base end hash = new_hash end + + def markup content, markup + markup = markup.to_sym + if respond_to? markup + send markup, content + else + content + end + end end before do diff --git a/views/admin_index_no_login.haml b/views/admin_index_no_login.haml index e3f1a7c..306d375 100644 --- a/views/admin_index_no_login.haml +++ b/views/admin_index_no_login.haml @@ -1,5 +1,5 @@ -%h1="Login" -%form{:action => '/admin/login', :method => 'post'} +%form#login.fields{:action => '/admin/login', :method => 'post'} + .login="Welcome in the admin area." .username %label.block{:for => 'username'}='Username' %input.block{:name => 'username', :placeholder => 'username', :value => flash[:username]} diff --git a/views/admin_layout.haml b/views/admin_layout.haml index d003a90..84cf944 100644 --- a/views/admin_layout.haml +++ b/views/admin_layout.haml @@ -2,11 +2,18 @@ %html %head %title="zero-knowledge - Adminpanel" - %link{:rel => 'stylesheet', :href => '/stylesheet.css', :type => 'text/css'} %link{:rel => 'stylesheet', :href => '/admin/stylesheet.css', :type => 'text/css'} %script{:src => '/public/head.min.js'} %body - #menu="Menue" + #menu + %ul + %li + %a{:href => '/'}="main" + %li + %a{:href => '/admin'}="admin" + -if @account + %li + %a{:href => '/admin/new'}="create" #messages -unless flash.error.nil? %p.error=flash.error diff --git a/views/admin_post_change.haml b/views/admin_post_change.haml index 71704b6..badeb96 100644 --- a/views/admin_post_change.haml +++ b/views/admin_post_change.haml @@ -4,7 +4,9 @@ %form{:action => "/admin/post/#{@post.id}", :method => :post} .fields =haml :admin_post_edit, :layout => nil - .buttons - %button{:type => :submit}="Update" - %button{:type => :submit, :formmethod => :get, - :formaction => '/admin/post'}="Back" + .buttons + %button{:type => :submit}="Update" + %button{:type => :submit, :formmethod => :get, + :formaction => '/admin/post'}="Back" + +~haml :post_single, :layout => nil \ No newline at end of file diff --git a/views/admin_post_edit.haml b/views/admin_post_edit.haml index 12b3733..f7b5d32 100644 --- a/views/admin_post_edit.haml +++ b/views/admin_post_edit.haml @@ -1,24 +1,34 @@ -.title - %label{:for => :post_title}="Title" - %input{:id => :post_title, - :name => 'post[title]', - :value => @post.title} -.author - %label{:for => :post_author}="Author" - %select{:name => 'post[account_id]', :id => :post_author} - -Account.all(:order => [:id]).each do |account| - -if @post.account == account - %option{:value => account.id, :selected => :selected} - =account.username - -else - %option{:value => account.id}=account.username -.written - %label{:for => :post_written}="written" - %input{:id => :post_written, - :name => 'post[written]', :value => @post.written} -.released - %label{:for => :post_released}="released" - %input{:type => :checkbox, :name => 'post[released]', - :class => "post-released-#{@post.released}", :value => 0, - :checked => @post.released, :id => :post_released} -%textarea.content{:name => 'post[content]'}=@post.content +.main + .content + %label{:for => :post_content}="Content" + %textarea.content{:id => :post_content, + :name => 'post[content]'}=@post.content + .title + %label{:for => :post_title}="Title" + %input{:id => :post_title, + :name => 'post[title]', + :value => @post.title} +.further + .written + %label{:for => :post_written}="written" + %input{:id => :post_written, + :name => 'post[written]', :value => @post.written} + .released + %label{:for => :post_released}="released" + %input{:type => :checkbox, :name => 'post[released]', + :class => "post-released-#{@post.released}", :value => 0, + :checked => @post.released, :id => :post_released} + .author + %label{:for => :post_author}="Author" + %select{:name => 'post[account_id]', :id => :post_author} + -Account.all(:order => [:id]).each do |account| + -if @post.account == account + %option{:value => account.id, :selected => :selected} + =account.username + -else + %option{:value => account.id}=account.username + .tags + %label{:for => :post_tags}="Tags" + %select{:name => 'post[tags]', :id => :post_tags, :size => 10, :multiple => true} + - Tag.all.each do |tag| + %option{:value => tag.id}=tag.name \ No newline at end of file diff --git a/views/admin_posts.haml b/views/admin_posts.haml index 403c9a4..c2dedd1 100644 --- a/views/admin_posts.haml +++ b/views/admin_posts.haml @@ -3,5 +3,4 @@ .title %a{:href => "/admin/post/#{post.id}"}=post.title %span.released{:class => "post-released-#{post.released}"} - .written=post.written - .content=post.content + .written=post.written \ No newline at end of file diff --git a/views/admin_stylesheet.scss b/views/admin_stylesheet.scss index 4817e94..6a02500 100644 --- a/views/admin_stylesheet.scss +++ b/views/admin_stylesheet.scss @@ -1,17 +1,151 @@ +// imports +@import "blueprint/colors"; +@import "compass/reset"; +@import "compass/css3"; +@import "compass/utilities"; + +// variables +$font-color: hsl(0, 6%, 90%); +$link-color: $font-color; +$link-hover-color: hsl(32, 100%, 50%); +$border-color: black; +$background-normal: hsl(204, 25%, 35%); +$background-menu-normal: hsl(0, 0%, 20%); +$background-menu: color-stops(lighten($background-menu-normal, 15%), + $background-menu-normal 25%, darken($background-menu-normal, 15%)); +$background-button: color-stops(lighten($background-normal, 15%), + $background-normal 75%, darken($background-normal, 5%)); +$background-button-hover: color-stops(lighten($background-normal, 5%), + $background-normal 75%, darken($background-normal, 15%)); +// some defaults for functions +$default-text-shadow-color: hsl(0, 10%, 50%); +$default-text-shadow-h-offset: 2px; +$default-text-shadow-v-offset: 2px; +$default-text-shadow-blur: 2px; +$default-border-radius: 2px; + +body {background: $background-normal; color: $font-color;} +#menu, #messages, #content { + padding-left: 3em; + padding-right: 3em; +} +#messsages, #content { + padding-top: 1em; +} +#menu { + @include background-image(linear-gradient($background-menu)); + li { + float: left; + display: inline-block; + } + :after { + content: ''; + clear: both; + display: block; + } + a { + color: $link-color; + padding: 1em; + display: block; + text-decoration: none; + font-weight: bold; + @include single-text-shadow; + &:hover { + color: $link-hover-color; + }; + } +} #messages { + padding-top: 1em; .message { border: 1px solid black; + padding: 0.5em; } .error { @extend .message; - background-color: red; + background-color: $error-bg-color; + border-color: $error-border-color; + color: $error-color; } .warning { @extend .message; - background-color: orange; + background-color: $notice-bg-color; + border-color: $notice-border-color; + color: $notice-color; } .notice { @extend .message; - background-color: green; + background-color: $success-bg-color; + border-color: $success-border-color; + color: $success-color; + } +} +#content { + .buttons { + clear: both; + } + .fields { + clear: both; + .main { + width: 74%; + float: left; + textarea { + width: 100%; + height: 25em; + @include box-sizing(border-box); + } + } + .further { + float: right; + width: 24%; + } + .further:after { + content: ''; + clear: both; + } + label, input, select { + display: block; + } + label { + font-size: 120%; + font-weight: bold; + } + input, select { + width: 100%; + } + } + button { + padding: 0.5em; + margin: 0.1em; + border: 1px solid $border-color; + color: $link-color; + font-weight: bold; + @include background-image(linear-gradient($background-button)); + &:hover { + @include background-image(linear-gradient($background-button-hover)); + } + &:active { + position: relative; + top: 1px; + } + } + a { + color: $link-color; + font: { + weight: bold; + decoration: none; + } + } +} +#login { + text-align: center; + .login { + padding: 1em; + font-weight: bold; + font-family: Sans; + } + > div { + width: 18em; + margin: auto; } }