implement fullscreen mode for non-combined widescreen mode

README.md

@@ -1,6 +1,6 @@
 # clean-greader
 
-clean-greader is a tiny tiny rss (1.8+) theme based on the latest Google Reader and inspired by other Google Services.  
+clean-greader is a tiny tiny rss (1.8+) theme based on the latest Google Reader and inspired by other Google Services.
 As of 2013/08/29 the theme is build from scratch to be independent from changes to the tt-rss default.css.
 
 ## Preview
@@ -33,7 +33,7 @@ Same as Installation - just overwrite the files.
 
 ## Custom settings
 
-There is a sample file called `_config.scss.sample` in the themes `css/` folder.  
+There is a sample file called `_config.scss.sample` in the themes `css/` folder.
 Before running gulp.js tasks, make sure to create this file, since you'll get an error otherwise.
 
 ```sh
@@ -49,9 +49,17 @@ $ ln -s _config.scss{.sample,}
 - type: `boolean`
 - default: `true`
 
-Display the first image as a thumbnail to save some space.  
+Display the first image as a thumbnail to save some space.
 If you're using image feeds, this might not be what you want.
 
+### Use fullscreen ( `$use-fullscreen` )
+
+- type: `boolean`
+- default: `false`
+
+This enables the theme to use the full page width instead of a limited container width.
+Initially, the clean-greader theme was supposed to be used in combined mode and therefore was always fixed to a specific container max-width. In 16.3.0, support for non-combined mode, and therefore also widescreen mode, was added - which might need a bit more space then the regular container's max-width.
+
 ### Rebuild the main.css file
 
 After making changes to the settings file (or basically any .scss file), you need to rebuild the css file.
@@ -94,7 +102,7 @@ The clean-greader theme is build on Google Chrome (33) using Arch Linux and test
 
 ### Theme's not displayed in the Settings
 
-As of tiny tiny rss 1.15.3, themes require to provide a version they support. Sadly, tiny tiny rss supports only providing a single specific version number. If this number provided by the theme does not match your tiny tiny rss version, the theme won't be available.  
+As of tiny tiny rss 1.15.3, themes require to provide a version they support. Sadly, tiny tiny rss supports only providing a single specific version number. If this number provided by the theme does not match your tiny tiny rss version, the theme won't be available.
 To manually change this number, see the version attribute with "1." prefix in [package.json](https://github.com/naeramarth7/clean-greader/blob/fa682dcb2d0f0d3f45daf1b9d77a4bde01e10f11/package.json#L3), change it to the tiny tiny rss version and rebuild the css file (see *Rebuild the main.css file* above).
 
 Please, feel free to open a PR if needed.
@@ -116,3 +124,6 @@ Please, feel free to open a PR if needed.
 
 ### Feed Settings
 ![](img/preview_04.png)
+
+### Main Page (disabled combined mode, enabled widescreen mode, set `$use-fullscreen: true`)
+![](img/preview_full_01.png)

css/_config.scss.sample

@@ -15,3 +15,10 @@
  * @type {Boolean}
  */
 $small-main-feed-image: true;
+
+/**
+ * Use the full screen instead of a given container size
+ *
+ * @type {Boolean}
+ */
+$use-fullscreen: false;

css/main.scss

@@ -65,7 +65,9 @@ body#ttrssPrefs {
 }
 
 #main {
-  max-width: 1140px;
+  @if not($use-fullscreen) {
+    max-width: 1140px;
+  }
   margin: 0 auto;
 }
 
@@ -111,6 +113,11 @@ div#header-wrap {
 /* dock splitter */
 div.dijitSplitterCover { display: none !important; }
 
+/* Fix images exceeding container width */
+img {
+  max-width: 100%;
+  height: auto;
+}
 
 
 /*********************
@@ -126,3 +133,4 @@ div.dijitSplitterCover { display: none !important; }
 @import "partials/accordion";
 @import "partials/notification";
 @import "partials/dialog";
+@import "partials/cmdline";

css/modules/_mixins.scss

@@ -15,16 +15,16 @@
 }
 
 @mixin center-item { margin-left: auto; margin-right: auto; text-align: center; }
-@mixin no-space($important: "") { margin: 0 #{$important}; padding: 0 #{$important}; border-width: 0 #{$important}; }
+@mixin no-space($important: '') { margin: 0 #{$important}; padding: 0 #{$important}; border-width: 0 #{$important}; }
 
 @mixin brdr-none { border: 0px solid transparent; }
 @mixin brdr-trans { border: 1px solid transparent; }
 @mixin brdr-light { border: 1px solid $clr-brdr-light; }
 @mixin brdr-red { border: 1px solid $clr-red; }
-@mixin brdr-card {
-  border-color: $clr-brdr-light;
-  border-style: solid;
-  border-width: 1px 1px 2px;
+@mixin brdr-card ($important: '') {
+  border-color: $clr-brdr-light #{$important};
+  border-style: solid #{$important};
+  border-width: 1px 1px 2px #{$important};
 }
 
 @mixin brdr-dock-inactive { border: 0px solid transparent; border-bottom-width: 2px; }
@@ -132,4 +132,4 @@
 @mixin box-sizing($value) {
   -moz-box-sizing: $value;
   box-sizing: $value;
-}
+}

css/partials/_articles.scss

@@ -18,9 +18,10 @@
   bottom: $card-gap-size;
   left: $card-gap-size !important;
   right: $card-gap-size;
+  height: auto !important;
 
   @include no-space;
-  @include brdr-card;
+  @include brdr-card(!important);
 
   &:not(.wide) {
     width: auto !important;
@@ -182,7 +183,6 @@
   padding: 0 $content-padding 0 $content-padding-to-header;
 
   max-width: $max-content-width;
-
   img { max-width: $max-content-width; }
 
   overflow: auto;
@@ -241,7 +241,8 @@
 
 /* article content in non combined display mode */
 #content-insert {
-  margin-bottom: 9px !important;
+  bottom: $card-gap-size !important;
+  // height: auto !important;
 
   #headlines-frame:not(.wide) ~ & {
     left: $card-gap-size !important;
@@ -251,18 +252,38 @@
 
   @include brdr-card;
   border-left-width: 1px !important;
+
+  .postHeader {
+    margin: -$content-padding;
+    padding: $content-padding;
+    background: $clr-bg-active-second;
+    color: $clr-fnt-main-second;
+    border-bottom: 1px solid $clr-brdr-light;
+
+    .postTitle {
+      a {
+        color: $clr-red;
+        font-weight: bold;
+      }
+      margin-bottom: $content-padding;
+    }
+  }
 }
 
-/* h-resizer in non combined display mode */
+/* resizer in non combined display mode */
 #content-insert_splitter {
   background: $clr-bg-active;
 
+  #headlines-frame.wide ~ & {
+    bottom: $card-gap-size !important;
+    height: auto !important;
+    @include brdr-card;
+  }
+
   #headlines-frame:not(.wide) ~ & {
     left: $card-gap-size !important;
     right: $card-gap-size !important;
     width: auto !important;
+    border-bottom-width: 0;
   }
-
-  @include brdr-light;
-  border-bottom-width: 0;
 }

css/partials/_cmdline.scss

@@ -0,0 +1,10 @@
+#cmdline {
+  position: fixed;
+  z-index: 999;
+  bottom: $card-gap-size;
+  left: $card-gap-size + 1px;
+  width: $card-nav-width - $card-gap-size - 3px;
+
+  background: $clr-bg-active;
+  @include brdr-light();
+}