From 4774ebbb2574ba0546238262b64e60bf115af890 Mon Sep 17 00:00:00 2001 From: jomo Date: Thu, 1 May 2014 17:26:44 +0200 Subject: [PATCH] lots of style/mobile changes --- app/assets/stylesheets/mobi.css.scss | 18 ++--- app/assets/stylesheets/style.css.scss | 89 +++++++++++++++++-------- app/views/blogposts/index.html.erb | 1 + app/views/blogposts/show.html.erb | 1 + app/views/comments/_comment.html.erb | 1 + app/views/forums/index.html.erb | 1 + app/views/forums/show.html.erb | 1 + app/views/forumthreads/show.html.erb | 1 + app/views/layouts/_head.html.erb | 12 ++-- app/views/layouts/application.html.erb | 1 - app/views/threadreplies/_reply.html.erb | 1 + db/schema.rb | 29 ++++---- 12 files changed, 98 insertions(+), 58 deletions(-) diff --git a/app/assets/stylesheets/mobi.css.scss b/app/assets/stylesheets/mobi.css.scss index 4c1cfd5..56b12b2 100644 --- a/app/assets/stylesheets/mobi.css.scss +++ b/app/assets/stylesheets/mobi.css.scss @@ -1,17 +1,8 @@ /* CSS for Phones only */ @media only screen -and (max-width: 999px) +and (max-width: 700px) { - - #mobile-info { - background: none repeat scroll 0 0 #ab0000; - color: #fff; - text-align: center; - display: block; - font-size: 0.7em; - } - th, td { // force tables into line-mode // it's a bit ugly, but probably the best @@ -20,7 +11,11 @@ and (max-width: 999px) } #head { - text-align: left; + #menu { + #logo:hover { + transition: none; + } + } } #main-content { @@ -38,6 +33,7 @@ and (max-width: 999px) &.with-avatar { margin-left: 0; + .avatar { float: none; margin: 0; diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss index a6b3078..fca08be 100644 --- a/app/assets/stylesheets/style.css.scss +++ b/app/assets/stylesheets/style.css.scss @@ -35,7 +35,7 @@ body { color: #3f3f3f; padding: 0 !important; margin: 0 !important; - font: 14px/1.6 'Oswald','Calibri','Arial','DejaVu Sans', 'Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif; + font: 14px 'Oswald','Calibri','Arial','DejaVu Sans', 'Open Sans','Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif; } ::selection { @@ -48,10 +48,6 @@ body { background: #363636; } -#mobile-info { - display: none; -} - a { color: #ab0000; text-decoration: none; @@ -77,41 +73,52 @@ a { border-bottom: 3px dashed #fdd; } } + #head { + background: #3f3f3f; + #menu { - background: #3f3f3f; - height: 50px; + margin: auto; + max-width: 100%; + width: 1600px; border-bottom: 1px solid #363636; + height: 100%; position: relative; + #logo { + display: inline-block; width: 100px; height: 100px; position: absolute; background: url(image_path('logo.png')) no-repeat; background-position: 0 -100px; - left: 85px; + &:hover { - transition: all 0.3s ease 0; + transition: all 0.3s ease 0s; background-position: 0 0; } } ul { - margin: 0 0 0 185px; + margin: 0 0 0 100px; padding: 0; list-style: none; line-height: 0; - a { - display: inline-block; - color: #fff; - &:hover { - color: #f66; - } - } + li { - margin: 15px 10px; - font-size: 20px; - line-height: 1em; + display: inline-block; + + a { + margin: 15px 10px; + font-size: 20px; + line-height: 1em; + display: inline-block; + color: #fff; + + &:hover { + color: #f66; + } + } } } } @@ -124,26 +131,31 @@ a { display: inline-block; width: 100%; background: #eaeaea; + #userinfo { display: inline-block; margin-right: 10px; text-shadow: 0 1px 1px #fff; + a { color: #3f3f3f; &:hover { color: #f00; } } + img.avatar { border: 1px solid #000; border-radius: 16px; vertical-align: middle; height: 32px; width: 32px; + &:hover { box-shadow: 0 0 2px; } } + #userinfo-box { display: inline-block; text-align: right; @@ -153,6 +165,7 @@ a { } } } + img.user-avatar { border: 1px solid #000; border-radius: 4px; @@ -178,8 +191,10 @@ span.no-about { width: 1600px; max-width: 100%; margin: auto; - border-bottom: 1px solid #ddd; - box-shadow: 0 10px 10px #ddd; + border: 1px solid #ddd; + border-top: none; + box-shadow: 0 0 5px #fff; + border-radius: 0 0 4px 4px; h1 { font-weight: normal; @@ -202,11 +217,13 @@ span.no-about { .post, .thread, .thread-reply { margin-bottom: 50px; + .post-content, .thread-content { margin-top: 10px; clear: both; word-wrap: break-word; overflow: hidden; + img { max-width: 100%; } @@ -214,35 +231,39 @@ span.no-about { .post-title, .thread-title { margin-bottom: 10px; word-wrap: break-word; + h1 { text-transform: capitalize; } + h2 { font-weight: normal; text-transform: capitalize; display: inline; font-size: 200%; } - .comment-counter { - float: right; - } } + table { tr, td, th { border-collapse: collapse; border: 1px solid #aaa; } + tbody { tr:nth-child(odd) { background: #fff; } + tr:nth-child(even) { background: #ddd; } } + td, th { padding: 0.3em 1em; } + thead { background: #3f3f3f; color: #fff; @@ -254,6 +275,7 @@ pre { border-radius: 2px; position: relative; background: #3f3f3f; + &:after { color: #fff; content: attr(lang); // show language on top right @@ -266,6 +288,7 @@ pre { transition: all 0.3s; cursor: default; } + &:hover:after { opacity: 1; right: 0; @@ -312,6 +335,7 @@ blockquote p { .user { display: inline-block; + a.role { display: inline-block; color: #fff !important; @@ -344,6 +368,7 @@ blockquote p { color: #ddd !important; } } + .donor { background: #f60 !important; border-radius: 3px; @@ -353,6 +378,7 @@ blockquote p { padding: 0 0.5em; display: inline-block; } + .ign { display: block; color: #000; @@ -382,6 +408,7 @@ input , select, textarea { &[type=submit] { margin: 0; + &.btn { cursor: pointer; } @@ -570,11 +597,18 @@ tr.spacer { visibility: hidden; } +.clear-right { + clear: right; + display: block; + visibility: hidden; +} + .item-group { margin: 30px 0; &.with-avatar { margin-left: 70px; + .avatar { margin: -7px 0 0 -77px; border: 1px solid #ccc; @@ -600,8 +634,10 @@ tr.spacer { border-bottom: 1px solid #ccc; color: #fff; text-shadow: 0 1px 1px #222; + a { color: #fff; + &:hover { color: #f66; } @@ -617,6 +653,7 @@ tr.spacer { display: block; padding: 0.5em; border-bottom: 1px solid #ddd; + &:target { animation: target 2.5s; -webkit-animation: target 2.5s; @@ -712,7 +749,7 @@ img { } #footer { - padding: 0 100px 30px; + padding: 30px 0; width: 1600px; max-width: 100%; margin: auto; diff --git a/app/views/blogposts/index.html.erb b/app/views/blogposts/index.html.erb index d23cc8c..b82e800 100644 --- a/app/views/blogposts/index.html.erb +++ b/app/views/blogposts/index.html.erb @@ -9,6 +9,7 @@ <%= link_to pluralize(p.comments.count, "Comment"), p %> +
diff --git a/app/views/blogposts/show.html.erb b/app/views/blogposts/show.html.erb index e2610a2..81f799e 100644 --- a/app/views/blogposts/show.html.erb +++ b/app/views/blogposts/show.html.erb @@ -4,6 +4,7 @@ <%= link_to(image_tag(@post.author.avatar_url(64), class: "avatar"), @post.author, title: @post.author.ign) %> <%= render partial: "users/username", locals: { user: @post.author } %> <%= link_to "edit", edit_blogpost_path(@post.id), class: "editlink" if mod? %> +
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 794323d..0319d8e 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -5,6 +5,7 @@ <%= link_to "edit", edit_blogpost_comment_path(c.blogpost, c), class: "editlink" if (mod? || c.author.is?(current_user)) %> +
diff --git a/app/views/forums/index.html.erb b/app/views/forums/index.html.erb index bc9123c..7add871 100644 --- a/app/views/forums/index.html.erb +++ b/app/views/forums/index.html.erb @@ -4,6 +4,7 @@
<%= group.name %> <%= link_to "edit", edit_forumgroup_path(group), class: "editlink" if admin? %> +
diff --git a/app/views/forums/show.html.erb b/app/views/forums/show.html.erb index a6cbb9e..e2b0773 100644 --- a/app/views/forums/show.html.erb +++ b/app/views/forums/show.html.erb @@ -13,6 +13,7 @@ <%= link_to pluralize(thread.replies.count, "Reply"), thread %> +
<%= link_to thread.title, forumthread_path(thread), class: "item #{"locked" if thread.locked}#{"sticky" if thread.sticky}" %> diff --git a/app/views/forumthreads/show.html.erb b/app/views/forumthreads/show.html.erb index bc74bc3..c34090f 100644 --- a/app/views/forumthreads/show.html.erb +++ b/app/views/forumthreads/show.html.erb @@ -4,6 +4,7 @@ <%= link_to(image_tag(@thread.author.avatar_url(64), class: "avatar"), @thread.author, title: @thread.author.ign) %> <%= render partial: "users/username", locals: { user: @thread.author } %> <%= link_to "edit", edit_forumthread_path( @thread), class: "editlink" if (@thread.author.is?(current_user) || mod?) %> +
<% if @thread.edited? %> diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb index 03f017d..124861e 100644 --- a/app/views/layouts/_head.html.erb +++ b/app/views/layouts/_head.html.erb @@ -2,12 +2,12 @@
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7a1b396..f6f68d6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,7 +10,6 @@ -
We don't have a mobile style yet. It might look shitty.
Tip: Hold your device in landscape mode.
<%= render partial: "/layouts/head" %>
<%= "
#{alert}
".html_safe if alert %> diff --git a/app/views/threadreplies/_reply.html.erb b/app/views/threadreplies/_reply.html.erb index 636a2bd..00f3839 100644 --- a/app/views/threadreplies/_reply.html.erb +++ b/app/views/threadreplies/_reply.html.erb @@ -5,6 +5,7 @@ <%= link_to "edit", edit_forumthread_threadreply_path(reply.thread, reply), class: "editlink" if mod? || reply.thread.author.is?(current_user) %> +
diff --git a/db/schema.rb b/db/schema.rb index 3ea2027..1b2af8f 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -18,8 +18,8 @@ ActiveRecord::Schema.define(version: 11) do t.text "content" t.integer "user_author_id" t.integer "user_editor_id" - t.datetime "created_at", null: false - t.datetime "updated_at", null: false + t.datetime "created_at" + t.datetime "updated_at" end create_table "comments", force: true do |t| @@ -27,8 +27,8 @@ ActiveRecord::Schema.define(version: 11) do t.integer "user_author_id" t.integer "user_editor_id" t.integer "blogpost_id" - t.datetime "created_at", null: false - t.datetime "updated_at", null: false + t.datetime "created_at" + t.datetime "updated_at" end create_table "forumgroups", force: true do |t| @@ -54,8 +54,8 @@ ActiveRecord::Schema.define(version: 11) do t.integer "user_author_id" t.integer "user_editor_id" t.integer "forum_id" - t.datetime "created_at", null: false - t.datetime "updated_at", null: false + t.datetime "created_at" + t.datetime "updated_at" end create_table "info", force: true do |t| @@ -63,9 +63,10 @@ ActiveRecord::Schema.define(version: 11) do t.text "content" end - create_table "register_tokens", primary_key: "uuid", force: true do |t| - t.string "token", limit: 6, null: false - t.string "email", null: false + create_table "register_tokens", force: true do |t| + t.string "uuid", limit: 32, null: false + t.string "token", limit: 6, null: false + t.string "email", null: false end create_table "roles", force: true do |t| @@ -76,8 +77,8 @@ ActiveRecord::Schema.define(version: 11) do create_table "sessions", force: true do |t| t.string "session_id", null: false t.text "data" - t.datetime "created_at", null: false - t.datetime "updated_at", null: false + t.datetime "created_at" + t.datetime "updated_at" end add_index "sessions", ["session_id"], name: "index_sessions_on_session_id", using: :btree @@ -88,8 +89,8 @@ ActiveRecord::Schema.define(version: 11) do t.integer "user_author_id" t.integer "user_editor_id" t.integer "forumthread_id" - t.datetime "created_at", null: false - t.datetime "updated_at", null: false + t.datetime "created_at" + t.datetime "updated_at" end create_table "users", force: true do |t| @@ -109,7 +110,7 @@ ActiveRecord::Schema.define(version: 11) do t.string "email_token" t.boolean "confirmed", default: false t.datetime "last_seen" - t.integer "role_id", default: 3, null: false + t.integer "role_id", null: false t.datetime "created_at" t.datetime "updated_at" end