some layout changes

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

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]}

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

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

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

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

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;
   }
 }