diff --git a/r2/r2/public/static/css/reddit.less b/r2/r2/public/static/css/reddit.less index 10d96d54d..04a257ea5 100755 --- a/r2/r2/public/static/css/reddit.less +++ b/r2/r2/public/static/css/reddit.less @@ -7008,10 +7008,12 @@ body.gold .buttons li.comment-save-button { display: inline; } padding: 2px 5px; } +@listing-chooser-grippy-width: 4px; body.with-listing-chooser { position: relative; & #header .tabmenu { + margin-left: @listing-chooser-grippy-width; li:first-child.selected { margin-left: 2px; } @@ -7020,11 +7022,38 @@ body.with-listing-chooser { & #header .pagename { position: absolute; bottom: 20px; + margin-left: @listing-chooser-grippy-width + 2px; + } + + & > .content, & .footer-parent { + margin-left: 140px + @listing-chooser-grippy-width; + } +} + +body.with-listing-chooser.listing-chooser-collapsed { + @listing-chooser-grippy-width: 6px; + & #header .tabmenu { + margin-left: 0; + } + + & #header .pagename { margin-left: 2px; } & > .content, & .footer-parent { - margin-left: 140px + margin-left: @listing-chooser-grippy-width + 4px; + } + + .listing-chooser { + width: 0; + padding-right: @listing-chooser-grippy-width; + .grippy { + z-index: 40; + width: @listing-chooser-grippy-width; + &:after { + margin-left: (@listing-chooser-grippy-width - 2px) / 2; + } + } } } @@ -7036,8 +7065,10 @@ body.with-listing-chooser { left: 0; bottom: 0; width: @width; - border-right: 1px solid #ccc; + border-right: 1px dotted #e5e5e5; + padding-right: @listing-chooser-grippy-width; background: #f7f7f7; + overflow: hidden; &:after { content: ''; @@ -7050,6 +7081,33 @@ body.with-listing-chooser { z-index: 20; } + .grippy { + position: absolute; + right: 0; + width: @listing-chooser-grippy-width; + height: 100%; + background: white; + border-left: 1px solid #ccc; + z-index: 25; + cursor: pointer; + + &:after { + @height: 50px; + content: ''; + display: block; + position: fixed; + top: 50%; + margin-left: (@listing-chooser-grippy-width - 2px) / 2; + margin-top: -@height / 2; + border-left: 2px dotted #ddd; + height: @height; + } + + &:hover { + background: #f4f4f4; + } + } + h3 { color: #777; text-align: right; @@ -7140,32 +7198,26 @@ body.with-listing-chooser { position: relative; background: lighten(#cee3f8, 6%); border-color: lighten(#369, 40%); - z-index: 25; + margin-right: -@listing-chooser-grippy-width; + padding-right: @listing-chooser-grippy-width; + box-shadow: -30px 0 30px -15px rgba(255, 255, 255, .5) inset; + z-index: 35; a { font-weight: bold; } - &:after, &:before { + @size: 5px; position: absolute; top: 50%; - margin-top: -15px; + right: 0; + margin-top: -@size; display: block; content: ''; - border: 15px solid transparent; + border: @size solid transparent; border-style: solid solid outset; // mitigates firefox drawing a thicker arrow - z-index: 25; - } - - &:before { - right: 0px; - border-right-color: #ccc; - } - - &:after { - right: -2px; - border-right-color: white; + border-left-color: lighten(#369, 25%); } } } diff --git a/r2/r2/public/static/js/multi.js b/r2/r2/public/static/js/multi.js index db0155c82..5e9525132 100644 --- a/r2/r2/public/static/js/multi.js +++ b/r2/r2/public/static/js/multi.js @@ -481,7 +481,8 @@ r.multi.MultiCreateForm = Backbone.View.extend({ r.multi.ListingChooser = Backbone.View.extend({ events: { - 'click .create button': 'createClick' + 'click .create button': 'createClick', + 'click .grippy': 'toggleCollapsed' }, createClick: function(ev) { @@ -494,5 +495,10 @@ r.multi.ListingChooser = Backbone.View.extend({ }) this.createForm.focus() } + }, + + toggleCollapsed: function() { + $('body').toggleClass('listing-chooser-collapsed') + store.set('ui.collapse.listingchooser', $('body').is('.listing-chooser-collapsed')) } }) diff --git a/r2/r2/public/static/js/uibase.js b/r2/r2/public/static/js/uibase.js index 3bd25ebc2..45f7b6b09 100644 --- a/r2/r2/public/static/js/uibase.js +++ b/r2/r2/public/static/js/uibase.js @@ -42,3 +42,9 @@ r.ui.Collapse.prototype = { } } +r.ui.collapseListingChooser = function() { + if (store.get('ui.collapse.listingchooser') == true) { + $('body').addClass('listing-chooser-collapsed') + } +} + diff --git a/r2/r2/templates/listingchooser.html b/r2/r2/templates/listingchooser.html index fa808021a..9e297a0a5 100644 --- a/r2/r2/templates/listingchooser.html +++ b/r2/r2/templates/listingchooser.html @@ -37,7 +37,9 @@ %endfor +
+