# HG changeset patch # User nanaya # Date 1435383961 -32400 # Node ID 26f8c634052c3fba9cb96a4164b5fee16a4b1830 # Parent 6feb8c2574a1ad9f94cd4251c2e51098e4799991 Complete rework. diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/javascripts/form_clear_main.coffee --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/assets/javascripts/form_clear_main.coffee Sat Jun 27 14:46:01 2015 +0900 @@ -0,0 +1,5 @@ +$(document).on "click", ".js-form-main-clear", (e) -> + e.preventDefault() + $(e.target).parents("form").find(".js-form-main") + .val("") + .focus() diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/javascripts/show_paste.coffee --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/app/assets/javascripts/show_paste.coffee Sat Jun 27 14:46:01 2015 +0900 @@ -0,0 +1,4 @@ +$(document).ready -> + $("[id^=L]").click (e) -> + console.log $(e.target).attr("id") + document.location = "##{$(e.target).attr("id")}" diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/_components.scss --- a/app/assets/stylesheets/_components.scss Mon Jun 08 19:14:53 2015 +0900 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,26 +0,0 @@ -.input-url1 { display: none; } - -input[type=radio] { - margin-right: $spacing/2; -} - -.alert { - padding: $spacing; -} - -.alert-danger { - background-color: $danger; - - strong { color: $danger-dark; } -} - -.alert-info { - background-color: $info; - - strong { color: $info-dark; } -} - -.field_with_errors { - display: flex; - border: 2px solid $danger-dark; -} diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/_layout.scss --- a/app/assets/stylesheets/_layout.scss Mon Jun 08 19:14:53 2015 +0900 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,46 +0,0 @@ -*, ::before, ::after { - position: relative; - box-sizing: border-box; -} - -body, h1, input { - margin: 0px; -} - -html, body { - height: 100%; -} - -body { - display: flex; - flex-direction: column; -} - - -header { - flex: none; - background: #eee; - display: flex; - align-items: center; - justify-content: space-between; - padding: $spacing/2 $spacing; - -} - -main { - flex: 1 0 auto; - width: 100%; - - display: flex; - flex-direction: column; - padding: $spacing; -} - -body, button, input { - font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 12px; -} - -.alert { - flex: none; -} diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/_new-paste.scss --- a/app/assets/stylesheets/_new-paste.scss Mon Jun 08 19:14:53 2015 +0900 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,82 +0,0 @@ -#new_paste { - flex: 1; - display: flex; - flex-direction: column; - - width: 100%; - - #paste-form { - flex: 1 0 auto; - display: flex; - flex-direction: column; - margin-bottom: $spacing; - - > * { - flex: 1 0 auto; - } - - textarea { - resize: none; - width: 100%; - } - } - - #paste-control { - flex: none; - - display: flex; - align-items: stretch; - justify-content: space-between; - - flex-direction: column; - @media (min-width: $screen-sm) { - flex-direction: row; - } - - .radio { - display: inline-flex; - align-items: center; - margin-right: $spacing; - } - .form-group { - display: flex; - flex-direction: column; - } - - .form-label { - display: block; - margin-bottom: $spacing/2; - } - - .inputs { - display: flex; - justify-content: space-around; - > * { - margin-right: $spacing; - flex: 1; - - &:last-child { - margin-right: 0px; - } - } - &.right { - margin-top: $spacing; - min-height: $spacing * 4; - } - - @media (min-width: $screen-sm) { - > * { - flex: 1 1 auto; - } - - &.right { - margin-top: 0px; - > * { - margin-left: $spacing; - margin-right: 0px; - } - } - } - } - } -} diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/_show-paste.scss --- a/app/assets/stylesheets/_show-paste.scss Mon Jun 08 19:14:53 2015 +0900 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,56 +0,0 @@ -#paste-show { - flex: 1 0 auto; - display: flex; - flex-direction: column; - - .nav { - flex: none; - display: flex; - list-style: none; - justify-content: space-between; - padding: 0px; - margin: (-$spacing) (-$spacing) $spacing; - - li { - flex: 1; - - a { - display: block; - padding: $spacing; - text-align: center; - &:hover { - background-color: #ccc; - } - } - } - } - - pre { - white-space: pre-wrap; - } -} - -#paste { - flex: 1 0 auto; - - font-family: $monospace; - ol { - background-color: #eee; - } - li { - background-color: #fff; - &:hover { - background-color: $info; - } - - &:target { - background-color: $info; - } - } -} - -#paste-show-nav { - flex: none; - display: flex; - flex-direction: column; -} diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/_variables.scss --- a/app/assets/stylesheets/_variables.scss Mon Jun 08 19:14:53 2015 +0900 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,9 +0,0 @@ -$spacing: 10px; -$screen-sm: 600px; - -$danger: scale-color(#f00, $lightness: 90%); -$danger-dark: darken($danger, 60%); -$info: scale-color(#0f0, $lightness: 90%); -$info-dark: darken($info, 60%); - -$monospace: Consolas, monospace; diff -r 6feb8c2574a1 -r 26f8c634052c app/assets/stylesheets/application.scss --- a/app/assets/stylesheets/application.scss Mon Jun 08 19:14:53 2015 +0900 +++ b/app/assets/stylesheets/application.scss Sat Jun 27 14:46:01 2015 +0900 @@ -1,6 +1,224 @@ -@import "variables"; -@import "components"; -@import "layout"; +$spacing: 10px; +$screen-sm: 600px; + +$bg: #fff; +$gray: #eee; +$gray-dark: darken($gray, 20%); +$danger: scale-color(#f00, $lightness: 90%); +$danger-dark: darken($danger, 60%); +$info: scale-color(#0f0, $lightness: 90%); +$info-dark: darken($info, 60%); +$primary: scale-color(#06f, $lightness: 90%); + +$monospace: Consolas, monospace; + +*, ::before, ::after { + position: relative; + box-sizing: border-box; +} + +body, button, input, textarea { + font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 12px; +} + +p, h1 { + margin: 0px; +} + +html { + height: 100%; +} + +body { + height: 100%; + margin: 0px; + display: flex; + flex-direction: column; +} + +.input-url1 { display: none !important; } + +.monospaced { + font-family: $monospace; +} + +.header { + background-color: $gray; + display: flex; + justify-content: space-between; + align-items: center; + padding: $spacing; + flex: none; +} + +.main { + display: flex; + flex: 1 0 auto; + padding: $spacing; + flex-direction: column; +} + +.main-form { + flex: 1; + display: flex; + flex-direction: column; +} + +.main-textarea-container { + flex: 1 0 auto; + display: flex; +} + +.main-textarea { + width: 100%; +} + +.settings { + display: flex; + margin: $spacing (-$spacing/2) 0px; +} + +.settings-item { + display: flex; + flex-direction: column; + flex: 1; + margin: 0px $spacing/2; + + @media (min-width: $screen-sm) { + flex: none; + } +} + +.settings-label { + margin-bottom: $spacing/2; +} + +.actions { + display: flex; +} + +.action { + flex: 1; + @media (min-width: $screen-sm) { + flex: none; + } + margin: 0px $spacing/2; +} -@import "new-paste"; -@import "show-paste"; +.alert { + padding: $spacing; + flex: none; +} + +.alert-danger { + background-color: $danger; +} + +.alert-info { + background-color: $info; +} + +.field_with_errors { + display: flex; + width: 100%; + border: 1px solid $danger-dark; +} + +.paste-content { + flex: 1 0 auto; + display: flex; + flex-direction: column; +} + +.paste-nav { + display: flex; + justify-content: space-between; + margin: 0px (-$spacing/2); +} + +.paste-nav-item { + flex: 1 1 0px; + text-align: center; + border: 1px solid $gray-dark; + margin: 0px $spacing/2 $spacing; + padding: $spacing; + + &:hover { + background-color: $gray-dark; + } +} + +.active { + background-color: $gray; +} + +.paste-plain { + background-color: $gray; + margin: 0px; + border: 1px solid $gray-dark; + flex: none; +} + +.line { + background-color: $bg; + flex: 1; +} + +.paste-nav--bottom { + margin-top: $spacing; + margin-bottom: 0px; +} + +.settings-item--inline { + flex-direction: row; + flex: 1; +} + +.action--horizontal-minimum { + margin: 0px; + flex: none; +} + +.settings-group { + display: flex; + flex-direction: column; + width: 100%; + + @media (min-width: $screen-sm) { + flex-direction: row; + justify-content: space-between; + } +} + +.btn { + box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.1) inset; + border: 0px; + background-color: $gray; + cursor: pointer; + padding: $spacing ($spacing*2); +} + +@mixin btn-color($color) { + background-color: $color; + + &:hover { + background-color: darken($color, 10%); + } + + &:focus { + background-color: darken($color, 20%); + } +} + +.btn--primary { + @include btn-color($primary); +} + +.btn--danger { + @include btn-color($danger); +} + +.btn--min-width { + flex: none; +} diff -r 6feb8c2574a1 -r 26f8c634052c app/views/layouts/application.html.erb --- a/app/views/layouts/application.html.erb Mon Jun 08 19:14:53 2015 +0900 +++ b/app/views/layouts/application.html.erb Sat Jun 27 14:46:01 2015 +0900 @@ -8,10 +8,12 @@ <%= yield(:before_page_header) %> -
-

<%= content_for :title %>

-

- Zeropaste. +

+

+ <%= link_to "Zeropaste", root_path %> / <%= content_for :title %> +

+ +

Source. <%= link_to 'Donate', 'https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=me%40myconan%2enet&lc=ID&item_name=Zeropaste%20development¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_subscribe_LG%2egif%3aNonHosted' %>.

@@ -19,7 +21,7 @@ <%= render "layouts/alerts" %> -
+
<%= yield %>
diff -r 6feb8c2574a1 -r 26f8c634052c app/views/pastes/_form.html.erb --- a/app/views/pastes/_form.html.erb Mon Jun 08 19:14:53 2015 +0900 +++ b/app/views/pastes/_form.html.erb Sat Jun 27 14:46:01 2015 +0900 @@ -1,33 +1,38 @@ -<%= form_for @paste do |f| %> +<%= form_for @paste, :html => { :class => "main-form" } do |f| %> <%= render "shared/filter_spam" %> -
- <%= f.text_area :paste, :rows => 10, :autofocus => true %> +
+ <%= f.text_area :paste, :rows => 10, :autofocus => true, :class => "main-textarea monospaced" %>
-
-
+
-
- <%= f.label :key, t(".deletion_key"), :class => "form-label" %> +
+ +
+ <%= f.label :key, t(".deletion_key"), :class => "settings-label" %> <%= f.text_field :key %>
-
-
<%= t(".privacy.label") %>
+
+
<%= t(".privacy.label") %>
<% paste_privacy_options.each do |label, value| %> -
+
-
- <%= f.button %> +
+ + <%= f.button :class => "action btn btn--primary" %> - <%= button_tag t(".clear"), :type => "button", :id => "reset_paste" %> + <%= button_tag t(".clear"), :type => "button", :class => "action btn btn--danger" %> +
+
<% end %> diff -r 6feb8c2574a1 -r 26f8c634052c app/views/pastes/show.html.erb --- a/app/views/pastes/show.html.erb Mon Jun 08 19:14:53 2015 +0900 +++ b/app/views/pastes/show.html.erb Sat Jun 27 14:46:01 2015 +0900 @@ -1,41 +1,35 @@ <% provide :title, "Paste ##{@paste.id}" %> -
- +
+
+ <%= link_to 'Plain', '#pl', :class => "paste-nav-item active" %> + <%= link_to 'Highlight', '#hl', :class => "paste-nav-item" %> + <%= link_to 'Markdown', '#md', :class => "paste-nav-item" %> +
-
- <% lines = @paste.paste.split("\n") %> - <%# list number contains + "." + <2.5 * spaces (approx)> %> -
    - <% lines.each.with_index(1) do |line, i| %> -
  1. - <%= line %> -
    2. - <% end %> -
-
+ <% lines = @paste.paste.split("\n") %> + <%# list number contains + "." + <2.5 * spaces (approx)> %> +
    + <% lines.each.with_index(1) do |line, i| %> +
  1. + <%= line %> +
    2. + <% end %> +
- +
+ +
+ <%= link_to 'Raw', paste_path(@paste, :txt), :class => "paste-nav-item" %> + <%= link_to 'Derive', root_path(:base => @paste), :class => "paste-nav-item" %> + <%= link_to 'More Paste', root_path, :class => "paste-nav-item" %> +