diff options
| -rw-r--r-- | css/news.css | 363 | ||||
| -rw-r--r-- | js/news.js | 2 | ||||
| -rw-r--r-- | templates/main.php | 10 | ||||
| -rw-r--r-- | templates/part.items.header.php | 15 |
4 files changed, 307 insertions, 83 deletions
diff --git a/css/news.css b/css/news.css index 025d203f5..6c9b03bb5 100644 --- a/css/news.css +++ b/css/news.css @@ -1,90 +1,263 @@ +.news_input { + float:left; + font-size:12px; + padding:4px 2px; + border:solid 1px #aacfe4; + width:200px; +} + +.svg { + border: inherit; + background: inherit; +} + +div.add_parentfolder { + position: relative; +} + +#file_upload_start { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter:alpha(opacity=0); + opacity:0; + z-index:1001; + width:0; + height:0; +} + +/** + * when there are no feeds in the db + */ +#firstrun { + width: 100%; + position: absolute; + top: 5em; + left: 0; + text-align: center; + font-weight:bold; + font-size:1.5em; + color:#777; +} + + #firstrun #selections { + font-size:0.8em; + margin: 2em auto auto auto; + clear: both; + } -.news_input { float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; } -.svg { border: inherit; background: inherit; } -div.add_parentfolder { position: relative; } -#file_upload_start { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; width:0; height:0;} + +/** + * View above the feeds which shows the feed title + * and the controls + */ +div.feed_controls { + box-sizing: border-box; + -moz-box-sizing: border-box; + background: none repeat scroll 0 0 #f7f7f7; + border-bottom: 1px solid #ccc; + box-shadow: 0 4px 4px -3px #ccc; + overflow: hidden; + position: fixed; + left: 35.8em; + right: 0; + top: 3.5em; + z-index: 1; +} + div.feed_controls div.subscriptions_title { + display: inline-block; + padding-left: .8em; + padding-bottom: .6em; + width: 22.4em; + border-right: 1px solid #ddd; + } + + div.feed_controls div.feed_title { + padding-left: 10px; + display: inline-block; + } + + div.feed_controls div.feed_title h1 { + width: 450px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + div.feed_controls h1 { + font-size: 1.5em; + color: #444; + padding-top: .5em; + } + + div.feed_controls .controls { + float: right; + } /* feed/folder list */ -#leftcontent { top: 3.5em !important; padding: 0; margin: 0; box-shadow: -3px 0px 7px rgb(0, 0, 0); } +#leftcontent { + width: 23.2em; + top: 3.5em !important; + padding: 0; + margin: 0; + z-index: 0; + overflow: hidden; +} -#feeds { background: #fff; width: 19.7em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0 0 0 0.3em;} +#feeds { + clear: both; + background-color: #f8f8f8; + position: relative; + overflow: auto; + height: 100%; + padding: 0 0 7em 0; + box-sizing: border-box; + -moz-box-sizing: border-box; +} -li { padding: 0px !important; } -li.feed { position: relative; margin-left: 16px !important; text-align: right; border-radius: 5px; padding-left: 5px !important; background-color: rgb(255,255,255) !important; } -li.feed a { padding: 0 0 0 20px !important; overflow: hidden; text-overflow: ellipsis; text-align: left; width: 65%; } -li.feed a.nonzero { font-weight: bold; } -li.feed a.zero { font-weight: normal; } + #feeds li { + padding: 0px !important; + } -li#selected_feed { background-color: #FF9933 !important; } -li.feed:hover { background-color: rgb(221, 221, 221) !important; } + #feeds li.feed { + position: relative; + text-align: right; + padding-left: 5px !important; + } + + #feeds li.feed a { + padding: 0 0 0 20px !important; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; + width: 65%; + } + + #feeds li.feed a.nonzero { + font-weight: bold; + } + + #feeds li.feed a.zero { + font-weight: normal; + } -li.collapsable_container { background-color: rgb(255,255,255) !important; margin-left: 16px; } -li.collapsable_container:hover { color: rgb(0, 0, 0) !important; background-color: rgb(255,255,255) !important; } -li.collapsable_container > ul { margin-bottom: 0.1em; } + #feeds li#selected_feed { + background-color: #FF9933 !important; + } + + #feeds li.feed:hover { + background-color: rgb(221, 221, 221) !important; + } -div.collapsable { position: relative; border-radius: 5px; } -.collapsable_trigger { border: none ; margin: 0 0 0 5px; padding: 0; border-radius: 0; box-shadow: none; vertical-align: middle !important; background: url('%webroot%/core/img/places/folder.svg') no-repeat; opacity: 1; } -.collapsable_title { padding-left: 0.2em; } -div.collapsable:hover { background-color: rgb(221, 221, 221); } + #feeds li.collapsable_container { + } + + #feeds li.collapsable_container:hover { + color: #000 !important; + background-color: #f8f8f8 !important; + } + + #feeds li.collapsable_container > ul { + margin: 0 0 0.1em 16px; + } -.feeds_delete { position: absolute; right: 0.1em; background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; display: none; padding: 0; margin: -8px 0 0 0; top: 50%; } -.feeds_edit { position: absolute; right: 1.6em; background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; display: none; padding: 0; margin: -8px 0 0 0; top: 50%; } + #feeds div.collapsable { + position: relative; + border-radius: 5px; + } + + #feeds .collapsable_trigger { + border: none ; + margin: 0 0 0 5px; + padding: 0; + border-radius: 0; + box-shadow: none; + vertical-align: middle !important; + background: url('%webroot%/core/img/places/folder.svg') no-repeat; + opacity: 1; + } + + #feeds .collapsable_title { + padding-left: 0.2em; + } + + #feeds div.collapsable:hover { + background-color: rgb(221, 221, 221); + } -.unreaditemcounter.nonzero { position: relative; background: #5E5E5E; border-radius: 5px; padding: 0 5px; color: white; text-align: center; margin: 0 0.3em 0 0.3em;} -.unreaditemcounter.zero { position: relative; margin: 0 0.3em 0 0; } + #feeds .feeds_delete { + position: absolute; + right: 0.1em; + background: url('%webroot%/core/img/actions/delete.svg') no-repeat center; + display: none; + padding: 0; + margin: -8px 0 0 0; + top: 50%; + } + + #feeds .feeds_edit { + position: absolute; + right: 1.6em; + background: url('%webroot%/core/img/actions/rename.svg') no-repeat center; + display: none; + padding: 0; + margin: -8px 0 0 0; + top: 50%; + } -/* when there are no feeds in the db */ -#firstrun { width: 100%; position: absolute; top: 5em; left: 0; text-align: center; font-weight:bold; font-size:1.5em; color:#777; } -#firstrun #selections { font-size:0.8em; margin: 2em auto auto auto; clear: both; } + #feeds .unreaditemcounter.nonzero { + position: relative; + background: #5E5E5E; + border-radius: 5px; + padding: 0 5px; + color: white; + text-align: center; + margin: 0 0.3em 0 0.3em; + } + + #feeds .unreaditemcounter.zero { + position: relative; + margin: 0 0.3em 0 0; + } /* feed controls */ -#addfolder { background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; padding-left: 20px !important; } -#addfeed { background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; padding-left: 20px !important; } +#addfolder { + background: url('%webroot%/core/img/places/folder.svg') no-repeat left center; + padding-left: 20px !important; +} -/* #feeds a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; } */ -#feedcontrols { padding: 0; bottom:0px; overflow:visible; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;} -ul.controls li { float: left; } +#addfeed { + background: url('%appswebroot%/news/img/rss.svg') no-repeat left center; + padding-left: 20px !important; +} + +#feed_settings { + padding: 0; + bottom:0px; + overflow:visible; + height:2.8em; + width: 23.2em; + margin:0; + background:#eee; + border-top:1px + solid #ccc; + position:fixed; +} + +ul.controls li { + float: left; +} /* item view */ #rightcontent { top: 3.5em !important; - padding: 0 0 0 5px; box-sizing: border-box; -moz-box-sizing: border-box; margin-top: 3.5em; + left: 35.8em; } /** - * View above the feeds which shows the feed title - * and the controls - */ - #rightcontent div.feed_controls { - box-sizing: border-box; - -moz-box-sizing: border-box; - background: none repeat scroll 0 0 #FFFFFF; - border-bottom: 1px solid #ccc; - box-shadow: 0 3px 3px -3px #000000; - text-align: right; overflow: hidden; - position: fixed; - left: 32.5em; - right: 0; - top: 3.5em; - } - - #rightcontent div.feed_controls div.feed_title { - float: left; - padding-left: 10px; - } - - #rightcontent div.feed_controls div.feed_title h1 { - font-size: 1.7em; - color: #444; - padding-top: .5em; - } - - /** * Area below the feed title and controls */ #rightcontent #feed_items { @@ -106,6 +279,10 @@ ul.controls li { float: left; } min-height: 100px; } + .feed_item:first-child { + border-top: 0; + } + /** * Utils panel */ @@ -113,11 +290,12 @@ ul.controls li { float: left; } height: 2em; margin: 0; padding: 0.6em 0.5em 0.5em 0.5em; - background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(255,255,255) 100%); - background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(255,255,255) 100%); - background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(255,255,255) 100%); - background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(255,255,255) 100%); - background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(255,255,255) 100%); + background-color: #f8f8f8; + background-image: linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); + background-image: -o-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); + background-image: -moz-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); + background-image: -webkit-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); + background-image: -ms-linear-gradient(top, rgb(248,248,248) 0%, rgb(255,255,255) 100%); } /** @@ -249,17 +427,58 @@ ul.controls li { float: left; } /* dialog/menues */ -div.dialog { overflow: visible; } +div.dialog { + overflow: visible; +} + +#dropdownBtn { + width: 20em; + padding-left: 0; + padding-right:20px; + background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; + text-align: left; + overflow: hidden; +} -#dropdownBtn { width: 20em; padding-left: 0; padding-right:20px; background: url('%webroot%/core/img/actions/triangle-s.svg') no-repeat right center; text-align: left; overflow: hidden;} -ul#dropdownmenu { left: 0em; box-shadow: 0px 0px 10px rgb(0, 0, 0); } +ul#dropdownmenu { + left: 0em; + box-shadow: 0px 0px 10px #000; +} -ul#feedfoldermenu { position:fixed; margin-left: 0; bottom: 2.8em; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;} +ul#feedfoldermenu { + position:fixed; + margin-left: 0; + bottom: 2.8em; + border-left:1px solid #ccc; + border-top:1px solid #ccc; + border-right:1px solid #ccc; + -moz-box-shadow: 0 -3px 3px -3px #000; + -webkit-box-shadow: 0 -3px 3px -3px #000; + box-shadow: 0 -3px 3px -3px #000; +} -li.menuItem { margin-left:0.7em; margin-right:0.7em; float: none !important; text-align: left; } -ul.menu { position: absolute; z-index:100; margin-left: 0.3em; display: none; background:#EEEEEE; background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); background:-moz-linear-gradient(#DCDCDC, #EEEEEE); background:-o-linear-gradient(#DCDCDC, #EEEEEE); background:linear-gradient(#DCDCDC, #EEEEEE); } +li.menuItem { + margin-left:0.7em; + margin-right:0.7em; + float: none !important; + text-align: left; +} +ul.menu { + position: absolute; + z-index:100; + margin-left: 0.3em; + display: none; + background:#EEEEEE; + background:-webkit-gradient(linear, 0 0, 0 100%, from(#DCDCDC), to(#EEEEEE)); + background:-moz-linear-gradient(#DCDCDC, #EEEEEE); + background:-o-linear-gradient(#DCDCDC, #EEEEEE); + background:linear-gradient(#DCDCDC, #EEEEEE); +} +.popup.bottomleft { + left: 35.8em; +} diff --git a/js/news.js b/js/news.js index 96a8fe56d..1828f4b6d 100644 --- a/js/news.js +++ b/js/news.js @@ -200,7 +200,7 @@ News={ $feedItems.empty(); $feedItems.html(jsonData.data.feedItems); var $feedTitle = $(".feed_controls .feed_title h1"); - $feedTitle.html('» ' + jsonData.data.feedTitle); + $feedTitle.html(jsonData.data.feedTitle); $('li#selected_feed').attr('id', ''); $('li.feed[data-id="' + feedId + '"]').attr('id', 'selected_feed'); diff --git a/templates/main.php b/templates/main.php index 5c066e599..4fb588aeb 100644 --- a/templates/main.php +++ b/templates/main.php @@ -4,6 +4,9 @@ <?php if ($_['feedid']){ + +echo $this->inc("part.items.header"); + ?> <div id="leftcontent" class="leftcontent"> @@ -12,13 +15,13 @@ if ($_['feedid']){ </ul> </div> -<div id="feedcontrols"> +<div id="feed_settings"> <ul class="controls"> <li> - <button class="svg" id="addfeedfolder" title="<?php echo $l->t('Add Feed/Folder'); ?>" onclick="News.DropDownMenu.fade('ul#feedfoldermenu')"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>" /></button> + <button class="svg" id="addfeedfolder" title="$l->t('Change View');" onclick="News.DropDownMenu.fade('ul#feedfoldermenu')"><img class="svg" src="<?php echo OCP\Util::linkTo('news', 'img/add.svg'); ?>" alt="<?php echo $l->t('Add Feed/Folder'); ?>" /></button> </li> <li> - <button class="svg" title="<?php echo $l->t('Change View'); ?>">Eye</button> + <button class="svg" title="$l->t('Change View');">Eye</button> </li> <li style="float: right"> <button class="svg" id="settingsbtn" title="<?php echo $l->t('Settings'); ?>"><img class="svg" src="<?php echo OCP\Util::imagePath('core','actions/settings.png'); ?>" alt="<?php echo $l->t('Settings'); ?>" /></button> @@ -34,7 +37,6 @@ if ($_['feedid']){ <div id="rightcontent" class="rightcontent" data-id="<?php echo $_['feedid']; ?>"> <?php - echo $this->inc("part.items.header"); echo '<div id="feed_items">'; echo $this->inc("part.items"); echo '</div>'; diff --git a/templates/part.items.header.php b/templates/part.items.header.php index ac2add0d4..5fdec1d46 100644 --- a/templates/part.items.header.php +++ b/templates/part.items.header.php @@ -11,12 +11,15 @@ if(isset($_['feedid'])){ ?> <div class="feed_controls"> + <div class="feed_title"> - <h1>» <?php echo $feedTitle; ?></h1> + <h1><?php echo $feedTitle; ?></h1> + </div> + <div class="controls"> + <input type="button" value="<?php echo $l->t('Mark all as read'); ?>" id="mark_all_as_read" /> + <select id="feed_filter"> + <option value="all"><?php echo $l->t('Show read/unread articles'); ?></option> + <option value="newest"><?php echo $l->t('Show only unread articles'); ?></option> + </select> </div> - <input type="button" value="<?php echo $l->t('Mark all as read'); ?>" id="mark_all_as_read" /> - <select id="feed_filter"> - <option value="all"><?php echo $l->t('Show all articles'); ?></option> - <option value="newest"><?php echo $l->t('Show only unread articles'); ?></option> - </select> </div>
\ No newline at end of file |