Revise libraries summary and show view

app/assets/javascripts/application.js.coffee

@@ -79,7 +79,6 @@
 #= require visual/ajax_spinner
 #= require visual/button
 #= require visual/colorbox
-#= require visual/details
 #= require visual/iframe
 #= require visual/input_enforcement
 #= require visual/mobile_nav

app/assets/javascripts/models/library/libraries.js.coffee

@@ -20,21 +20,20 @@ You should have received a copy of the GNU Affero General Public License
 along with Fairmondo.  If not, see <http://www.gnu.org/licenses/>.
 ###
 
-# This function copies the first two comments to the comment preview for a given commentable (library)
-#
-document.Fairmondo.copyCommentsToPreview = (commentable_selector) ->
-  commentable = $(commentable_selector)
-  first_two_comments = $(commentable_selector + ".Comments-section .Comment-single:lt(2)").clone()
-  preview_element = $(commentable_selector + '.Library-comments')
-  preview_element.html(first_two_comments)
-
 $(document).always ->
-  $('.js-library-settings').hide()
-  $('.js-library-show-settings').click (e) =>
-    $(e.target).parent().parent().find('.js-library-settings').show()
-    $(e.target).hide()
 
+  # Hide edit section per default (not doing this per CSS because our
+  # current test suite doesn't support JavaScript
+  $('.library-edit-settings').hide()
+
+  # Show edit section when button is clicked
+  $('.js-library-edit-trigger').click (e) ->
+    $(e.target).siblings('.library-edit-settings').slideToggle('fast')
+    false
+
+  # Scroll to and focus on new library form in library index view
   $('#library-form-link a').click ->
-    $('html, body').animate
-      scrollTop: $('#library-form').offset().top, 'slow'
-    $('#new_library_name').focus()
+    $('html, body').animate(
+      { scrollTop: $('#library-form').offset().top }, ->
+        $('#new_library_name').focus()
+    )

app/assets/javascripts/vendor/jquery.socialshareprivacy.js

@@ -151,7 +151,7 @@
             if (facebook_on) {
                 var fb_enc_uri = encodeURIComponent(uri + options.services.facebook.referrer_track);
                 var fb_code = '<iframe src="https://www.facebook.com/plugins/like.php?locale=' + options.services.facebook.language + '&amp;href=' + fb_enc_uri + '&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=' + options.services.facebook.action + '&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:123px; height:21px;" allowTransparency="true"></iframe>';
-                var fb_dummy_btn = '<i class="fa fa-facebook-square fa-lg" id="facebook-dummy" title="' + options.services.facebook.txt_fb + '"></i>';
+                var fb_dummy_btn = '<i class="fa fa-facebook-square fa-2x" id="facebook-dummy" title="' + options.services.facebook.txt_fb + '"></i>';
 
                 context.append('<li class="facebook help_info"><span class="switch fa lock"></span><div class="fb_like dummy_btn">' + fb_dummy_btn + '</div></li>');
 
@@ -184,7 +184,7 @@
                 var twitter_enc_uri = encodeURIComponent(uri + options.services.twitter.referrer_track);
                 var twitter_count_url = encodeURIComponent(uri);
                 var twitter_code = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/tweet_button.html?url=' + twitter_enc_uri + '&amp;counturl=' + twitter_count_url + '&amp;text=' + text + '&amp;count=horizontal&amp;lang=' + options.services.twitter.language + '" style="width:95px; height:25px;"></iframe>';
-                var twitter_dummy_btn = '<i class="fa fa-twitter-square fa-lg" id="twitter-dummy" title="' + options.services.twitter.txt_twitter + '"></i>';
+                var twitter_dummy_btn = '<i class="fa fa-twitter-square fa-2x" id="twitter-dummy" title="' + options.services.twitter.txt_twitter + '"></i>';
 
                 context.append('<li class="twitter help_info"><span class="switch fa lock"></span><div class="tweet dummy_btn">' + twitter_dummy_btn + '</div></li>');
 
@@ -212,7 +212,7 @@
 
                 // we use the Google+ "asynchronous" code, standard code is flaky if inserted into dom after load
                 var gplus_code = '<div class="g-plusone" data-size="medium" data-href="' + gplus_uri + '"></div><script type="text/javascript">window.___gcfg = {lang: "' + options.services.gplus.language + '"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script>';
-                var gplus_dummy_btn = '<i class="fa fa-google-plus-square fa-lg" id="gplusone-dummy" title="' + options.services.gplus.txt_gplus + '"></i>';
+                var gplus_dummy_btn = '<i class="fa fa-google-plus-square fa-2x" id="gplusone-dummy" title="' + options.services.gplus.txt_gplus + '"></i>';
 
                 context.append('<li class="gplus help_info"><span class="switch fa lock"></span><div class="gplusone dummy_btn">' + gplus_dummy_btn + '</div></li>');
 
@@ -240,7 +240,7 @@
 
                 // we use the Google+ "asynchronous" code, standard code is flaky if inserted into dom after load
                 var pinterest_code = '<div class="pinterest"><a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a></div>';
-                var pinterest_dummy_btn = '<i class="fa fa-pinterest-square fa-lg" id="pinterest-dummy" title="' + options.services.pinterest.txt_pinterest + '"></i>';
+                var pinterest_dummy_btn = '<i class="fa fa-pinterest-square fa-2x" id="pinterest-dummy" title="' + options.services.pinterest.txt_pinterest + '"></i>';
 	            var pinterest_script = document.createElement('script');
 				pinterest_script.type = 'text/javascript';
 				pinterest_script.src='https://assets.pinterest.com/js/pinit.js';

app/assets/stylesheets/controller/articles.scss

@@ -284,7 +284,7 @@ ul.category-selected-list {
   }
 }
 
-// Fragezeichen-Button
+// Questionmark button
 #libraries_popup > span.sprite_helper {
   position: absolute;
   top: 0.5em;
@@ -314,7 +314,7 @@ ul.category-selected-list {
   margin-right: 0.6em;
 }
 
-// Formular
+// Form
 
 #libraries_popup > .formtastic.library {
   margin-top: 0.25em;
@@ -323,15 +323,15 @@ ul.category-selected-list {
     float: left;
   }
 
-  // Plus-Button
+  // Plus button
   .actions {
     float: left;
     margin: 0;
   }
 }
 
 
-// Auge
+// Eye
 #eye_checkbox {
   color: $blue;
   cursor: pointer;
@@ -340,7 +340,7 @@ ul.category-selected-list {
 }
 
 
-// Textfeld
+// Input field
 #library_name_input {
   float: left;
   margin: 0 0.2em;
@@ -358,7 +358,7 @@ ul.category-selected-list {
 
 // article borrow / swap links
 
-// Link zu Sammlungen
+// Link to libraries
 #libraries_popup > #libraries_links {
   padding: 0.75em 0 0 0;
   margin: 0;

app/assets/stylesheets/controller/categories.scss

@@ -0,0 +1,11 @@
+@import "mixins/all";
+
+.libraries {
+  clear: both;
+  margin: 1em 0;
+  overflow: hidden;
+
+  h2 {
+    font-weight: 600;
+  }
+}

app/assets/stylesheets/controller/libraries.scss

@@ -1,8 +1,26 @@
 @import "mixins/all";
 
+h1 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin: 0.5em 0;
+}
+
+h2 {
+  font-size: 1em;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1em;
+}
+
+
+/******************************** Index view **********************************/
+
 #library-form {
   @include whitebox;
-  margin-bottom: 1em;
+  margin: 1em 0;
   clear: both;
 }
 
@@ -11,8 +29,115 @@
   text-align: right;
 }
 
+
 .libraries {
   clear: both;
   border-top: 0.1em solid $lighter-gray;
   padding-top: 1em;
 }
+
+.pagination {
+  clear: both;
+}
+
+
+/******************************** Show view ***********************************/
+
+.library-header {
+  overflow: hidden;
+}
+
+.library-header-owner {
+  float: left;
+  overflow: hidden;
+  margin: 0.5em 0;
+  color: $black;
+
+  a {
+    text-transform: uppercase;
+  }
+
+  img {
+    display: block;
+    float: left;
+    width: 20px;
+    height: 20px;
+    margin-right: 0.5em;
+    margin-bottom: -4px;
+  }
+}
+
+.library-header-owner > .wrapper {
+  float: left;
+}
+
+
+.library-header-owner-by,
+.library-header-owner-name {
+
+}
+
+.library-header-title {
+  clear: left;
+  float: left;
+
+  small {
+    font-size: 0.8em;
+  }
+}
+
+.library-header-title-visibility {
+  color: $secondary-color;
+}
+
+.library-actions {
+  float: right;
+  margin: 0.4em 0 0 1em;
+  overflow: hidden;
+}
+
+.library-body {
+  clear: both;
+  margin-top: 1em;
+}
+
+.library-edit,
+.library-admin {
+  margin: 0.5em 0;
+  padding: 1em;
+  background-color: $lighter-gray;
+}
+
+.library-admin {
+  clear: both;
+  margin-top: 1em;
+}
+
+// Set to display:none once testing JavaScript works
+.library-edit-settings {
+  display: block;
+}
+
+.morelibraries {
+  margin-top: 2em;
+}
+
+
+/******************************* Breakpoints *********************************/
+
+// tablet
+@include at-breakpoint($bp-tablet) {
+  .library-header-owner {
+    img {
+      margin-right: 1em;
+      margin-bottom: 5px;
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  .library-header-owner-by,
+  .library-header-owner-name {
+    display: block;
+  }
+}

app/assets/stylesheets/controller/welcome.scss

@@ -431,9 +431,7 @@
 
 
 
-/*
- * Responsive stuff
- */
+/******************************** Breakpoints *********************************/
 
 
 // mobile-horizontal
@@ -572,7 +570,6 @@
     }
   }
 
-
   // Remove one article from a teaser for layout reasons
   .teaser--reducible .teaser-queue {
     &:first-child {

app/assets/stylesheets/layout/_fonts.scss

@@ -59,7 +59,7 @@
  * Italics
  */
 
-/*
+
 @font-face {
   font-family: 'Open Sans';
   font-weight: 400;
@@ -70,7 +70,7 @@
        font-url('opensans/OpenSans-Italic-webfont.ttf') format('truetype'),
        font-url('opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
 }
-*/
+
 
 @font-face {
   font-family: 'Open Sans';

app/assets/stylesheets/mixins/_variables.scss

@@ -15,6 +15,7 @@ $xsmall-font-size: 0.7em;
 
 // colors
 $blue: #428ebd;
+$secondary-color: #DA5230;
 $green: #718b46;
 $turquoise-green: #3ac25d;
 $gray:  #909090;

app/assets/stylesheets/modules/_comments.scss

@@ -34,6 +34,15 @@
   margin-right: 0.6em;
 }
 
+.Comments-section {
+  margin: 2em 0 1em;
+}
+
+.Comments-section h2 {
+  font-weight: 600;
+  font-size: 1em;
+}
+
 .Comments-section form li.input {
   list-style: none;
   overflow: visible !important;
@@ -46,9 +55,13 @@
 }
 
 .Comments-count {
-  margin-right: 0.5em;
-  > i.fa {
-    font-size: 1.2rem;
+  float: left;
+
+  em {
+    margin-left: 0.3em;
+    color: $secondary-color;
+    font-size: 1em;
+    line-height: 2em;
   }
 }
 

app/assets/stylesheets/modules/_hearts.scss

@@ -1,15 +1,12 @@
-div[class$="-hearts"] {
-  float: right;
-
-  > i.fa-heart, i-fa-heart-o {
-    font-size: 1.2rem;
-  }
-
+.Hearts-button {
+  margin-right: 1.5em;
+  float: left;
+  color: $light-gray;
 }
 
-.Hearts-button {
-  position: relative;
-  i.fa-heart, i.fa-heart-o {
-    font-size: 1.2rem;
-  }
+.Hearts-button em {
+  margin-left: 0.1em;
+  font-size: 1em;
+  line-height: 2em;
+  color: $secondary-color;
 }