From 936f333227bde5d5e71a8c87022b4dcbf2f030e2 Mon Sep 17 00:00:00 2001 From: Jonas Heinrich Date: Sun, 12 Aug 2018 17:19:04 +0200 Subject: [PATCH] fix styling issue on chrome browsers --- CHANGELOG.md | 2 +- appinfo/info.xml | 1 - appinfo/routes.php | 4 + css/main.css | 457 +++------------------------------------------ js/main.js | 1 - 5 files changed, 34 insertions(+), 431 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bf3e9b..e1811d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## 0.6.2 – 2018-08-11 ### Fixed - Remember last menu state - [#](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/) @onny + [#26](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/26) @onny - Don't scroll to top when clicking on station [#62](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/62) @onny - Fix Nextcloud 14 compatibility diff --git a/appinfo/info.xml b/appinfo/info.xml index 97caf21..9d9cdb1 100755 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -7,7 +7,6 @@ 0.6.2 agpl Jonas Heinrich - radio https://git.project-insanity.org/onny/nextcloud-app-radio diff --git a/appinfo/routes.php b/appinfo/routes.php index 7acdcba..a868912 100644 --- a/appinfo/routes.php +++ b/appinfo/routes.php @@ -12,6 +12,10 @@ return [ ], 'routes' => [ ['name' => 'page#index', 'url' => '/', 'verb' => 'GET'], + ['name' => 'page#favorites', 'url' => '/', 'verb' => 'GET'], + ['name' => 'page#recent', 'url' => '/', 'verb' => 'GET'], + ['name' => 'page#categories', 'url' => '/', 'verb' => 'GET'], + ['name' => 'page#top', 'url' => '/', 'verb' => 'GET'], ['name' => 'settings#getMenuState', 'url' => '/getMenuState', 'verb' => 'GET'], ['name' => 'settings#saveMenuState', 'url' => '/saveMenuState', 'verb' => 'POST'], ['name' => 'station_api#preflighted_cors', 'url' => '/api/0.1/{path}', diff --git a/css/main.css b/css/main.css index 658f7ad..f841d19 100644 --- a/css/main.css +++ b/css/main.css @@ -221,12 +221,7 @@ table td { text-align: left; font-weight: normal; } -table td { - padding: 0 15px; - font-style: normal; - background-position: 8px center; - background-repeat: no-repeat; -} + table th#headerName { position: relative; width: 9999px; /* not really sure why this works better than 100% … table styling */ @@ -254,47 +249,10 @@ table th.column-last, table td.column-last { max-width: 130px; } -/* Multiselect bar */ -#filestable.multiselect { - top: 95px; -} -table.multiselect thead { - position: fixed; - top: 89px; - z-index: 10; - -moz-box-sizing: border-box; - box-sizing: border-box; - left: 250px; /* sidebar */ -} - table thead th { background-color: #fff; } -table.multiselect thead th { - background-color: rgba(255, 255, 255, 0.95); /* like controls bar */ - color: #000; - font-weight: bold; - border-bottom: 0; -} -#app-content.with-app-sidebar table.multiselect thead{ - margin-right: 27%; -} - -table.multiselect #headerName { - position: relative; - width: 9999px; /* when we use 100%, the styling breaks on mobile … table styling */ -} -table.multiselect #modified { - display: none; -} - -table td.selection, -table th.selection, -table td.fileaction { - width: 32px; - text-align: center; -} table td.filename a.name { position:relative; /* Firefox needs to explicitly have this default set … */ -moz-box-sizing: border-box; @@ -318,18 +276,8 @@ table td.filename .thumbnail { background-size: contain; background-position: center; } -table td.filename input.filename { - width: 70%; - margin-top: 9px; - /*margin-left: 48px;*/ - cursor: text; -} -.has-favorites table td.filename input.filename { - /*margin-left: 52px;*/ -} -table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:3px 8px 8px 3px; } -table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:15px 0; } +table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-child { float:left; padding:0px 0; } .modified, .column-last>span:first-child { position: relative; @@ -338,7 +286,6 @@ table td.filename .nametext, .uploadtext, .modified, .column-last>span:first-chi /*width: 110px;*/ } -/* TODO fix usability bug (accidental file/folder selection) */ table td.filename .nametext { position: absolute; left: 60px; @@ -353,20 +300,12 @@ table td.filename .nametext { margin-right: 0px; } -.hide-hidden-files #fileList tr.hidden-file, -.hide-hidden-files #fileList tr.hidden-file.dragging { - display: none; -} - #fileList tr.animate-opacity { -webkit-transition:opacity 250ms; -moz-transition:opacity 250ms; -o-transition:opacity 250ms; transition:opacity 250ms; } -#fileList tr.dragging { - opacity: 0.2; -} table td.filename .nametext .innernametext { text-overflow: ellipsis; @@ -425,94 +364,9 @@ table td.filename .nametext .innernametext { } } -/* for smaller resolutions - see mobile.css */ - -table td.filename .uploadtext { - font-weight: normal; - margin-left: 55px; - margin-top: 5px; - height: 20px; - padding: 10px 0; - font-size: 11px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; -} - -.ie8 input[type="checkbox"]{ - padding: 0; -} - -/* File checkboxes */ -html:not(.ie8) #fileList tr td.filename>.selectCheckBox + label:before { - opacity: 0; - position: absolute; - bottom: 4px; - right: 0; - z-index: 10; -} -html.ie8 #fileList tr td.filename>.selectCheckBox { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - float: left; - top: 0; - margin: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ -} - -/* Show checkbox when hovering, checked, or selected */ -html.ie8 #fileList tr:hover td.filename>.selectCheckBox, -html.ie8 #fileList tr:focus td.filename>.selectCheckBox, -html.ie8 #fileList tr td.filename>.selectCheckBox:checked, -html.ie8 #fileList tr.selected td.filename>.selectCheckBox, -html:not(.ie8) #fileList tr:hover td.filename>.selectCheckBox + label:before, -html:not(.ie8) #fileList tr:focus td.filename>.selectCheckBox + label:before, -html:not(.ie8) #fileList tr td.filename>.selectCheckBox:checked + label:before, -html:not(.ie8) #fileList tr.selected td.filename>.selectCheckBox + label:before { - opacity: 1; -} -html.ie8 #fileList tr:hover td.filename>.selectCheckBox, -html.ie8 #fileList tr:focus td.filename>.selectCheckBox, -html.ie8 #fileList tr td.filename>.selectCheckBox[checked=checked], -html.ie8 #fileList tr.selected td.filename>.selectCheckBox { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); -} - -/* Use label to have bigger clickable size for checkbox */ -#fileList tr td.filename>.selectCheckBox + label, -.select-all + label { - background-position: 30px 30px; - height: 50px; - position: absolute; - width: 50px; - z-index: 5; -} -#fileList tr td.filename>.selectCheckBox { - /* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute - * to prevent it to increase the height */ - position: absolute; - z-index: 10; -} -.select-all + label { - top: 0; -} -.ie8 .select-all, -.select-all + label:before { - position: absolute; - top: 18px; - left: 18px; - z-index: 10; -} -.has-favorites .select-all { - left: 68px; -} - #fileList tr td.filename { position: relative; width: 100%; - padding-left: 0; - padding-right:0; -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms; } @@ -522,37 +376,10 @@ html.ie8 #fileList tr.selected td.filename>.selectCheckBox { height: 50px; } -#fileList tr td.filename .favorite { - display: inline-block; - float: left; -} -#fileList tr td.filename .action-favorite { - display: block; - float: left; - width: 30px; - line-height: 100%; - text-align: center; -} - -#uploadsize-message,#delete-confirm { display:none; } - -/* File actions */ -.fileactions { - position: absolute; - right: 0; -} - .busy .fileactions, .busy .action { visibility: hidden; } -/* fix position of bubble pointer for Files app */ -.bubble, -#app-navigation .app-navigation-entry-menu { - border-top-right-radius: 3px; - min-width: 100px; -} - /* force show the loading icon, not only on hover */ #fileList .icon-loading-small { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; @@ -561,141 +388,6 @@ html.ie8 #fileList tr.selected td.filename>.selectCheckBox { display: inline !important; } -#fileList img.move2trash { display:inline; margin:-8px 0; padding:16px 8px 16px 8px !important; float:right; } - -#fileList .action.action-share-notification span, #fileList a.name { - cursor: default !important; -} - -a.action > img { - height: 16px; - width: 16px; - vertical-align: text-bottom; -} - -/* Actions for selected files */ -.selectedActions { - position: absolute; - top: 0; - right: 0; -} -.selectedActions a { - display: inline; - font-size: 11px; - line-height: 50px; - padding: 18px 5px; -} -.selectedActions a.delete-selected { - padding-right: 15px; -} -.selectedActions a.hidden { - display: none; -} -.selectedActions a img { - position:relative; - vertical-align: text-bottom; - margin-bottom: -1px; -} - -html.ie8 .column-mtime .selectedActions { - top: -95px; -} - -#fileList a.action { - display: inline; - padding: 17px 8px; - line-height: 50px; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - display:none; -} -#fileList a.action.action-share { - padding: 17px 14px; -} - -#fileList a.action.action-menu { - padding-top: 17px; - padding-bottom: 17px; - padding-left: 14px; - padding-right: 14px; -} - -.ie8 #fileList a.action img, -#fileList tr:hover a.action, -#fileList a.action.permanent, -#fileList tr:focus a.action, -#fileList a.action.permanent, -#fileList tr:hover a.action.no-permission:hover, -#fileList tr:focus a.action.no-permission:focus, -/*#fileList .name:focus .action,*/ -/* also enforce the low opacity for disabled links that are hovered/focused */ -.ie8 #fileList a.action.disabled:hover img, -#fileList tr:hover a.action.disabled:hover, -#fileList tr:focus a.action.disabled:focus, -#fileList .name:focus a.action.disabled:focus, -#fileList a.action.disabled img { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); - opacity: .3; -} -.ie8 #fileList a.action:hover img, -#fileList tr a.action.disabled.action-download, -#fileList tr:hover a.action.disabled.action-download:hover, -#fileList tr:focus a.action.disabled.action-download:focus, -#fileList tr:hover a.action:hover, -#fileList tr:focus a.action:focus, -#fileList .name:focus a.action:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; - filter: alpha(opacity=70); - opacity: .7; - display:inline; -} -#fileList tr a.action.disabled { - background: none; -} - -/* show share action of shared items darker to distinguish from non-shared */ -#fileList a.action.action-share.permanent.shared-style, -/* show hovered permanent entries darker */ -#fileList tr a.action.action.permanent:hover, -#fileList tr a.action.action.permanent:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; - filter: alpha(opacity=70) !important; - opacity: .7 !important; - display:inline; -} -/* always show actions on mobile, not only on hover */ -#fileList a.action.permanent { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important; - filter: alpha(opacity=30) !important; - opacity: .3 !important; - display: inline !important; -} - -/* properly display actions in the popover menu */ -#fileList .popovermenu .action { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; - filter: alpha(opacity=50) !important; - opacity: .5 !important; -} -#fileList .popovermenu .action:hover, -#fileList .popovermenu .action:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; - filter: alpha(opacity=100) !important; - opacity: 1 !important; -} - - -#selectedActionsList a.download.disabled, -#fileList tr a.action.action-download.disabled { - color: #000000; -} - -#fileList tr:hover a.action.disabled:hover * { - cursor: default; -} - .summary { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); @@ -709,37 +401,6 @@ html.ie8 .column-mtime .selectedActions { table tr.summary td { background-color: transparent; } -.summary td { - border-bottom: none; - vertical-align: top; - padding-top: 20px; -} -.summary .info { - margin-left: 40px; -} -.has-favorites .summary .info { - margin-left: 90px; -} - -table.dragshadow { - width:auto; -} -table.dragshadow td.filename { - /* padding-left:60px; */ - padding-right:16px; - height: 36px; -} -table.dragshadow td.size { - padding-right:8px; -} -#upgrade { - width: 400px; - position: absolute; - top: 200px; - left: 50%; - text-align: center; - margin-left: -200px; -} .mask { z-index: 50; position: absolute; @@ -762,91 +423,6 @@ table.dragshadow td.size { opacity: 0; } -#fileList .popovermenu a.action img { - padding: initial; -} - -html.ie8 #controls .button.new { - padding-right: 0; -} - -.newFileMenu { - width: 200px; - margin-left: -56px; - margin-top: 25px; - z-index: 1001; -} - -.newFileMenu .menuitem { - white-space: nowrap; - overflow: hidden; -} -.newFileMenu.popovermenu a.menuitem, -.newFileMenu.popovermenu label.menuitem, -.newFileMenu.popovermenu .menuitem { - padding: 0; - margin: 0; -} - -.newFileMenu.popovermenu a.menuitem.active { - opacity: 1; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); -} - -.newFileMenu.bubble:after { - left: 75px; - right: auto; -} -.newFileMenu.bubble:before { - left: 75px; - right: auto; -} - -.newFileMenu .filenameform { - display: inline-block; -} - -.newFileMenu .filenameform input { - width: 100%; - box-sizing: border-box; - margin: -2px 0; -} - -#fileList .popovermenu .action { - color: #000; -} - -#filestable .filename .action .icon, -#filestable .selectedActions a .icon, -#controls .actions .button .icon { - display: inline-block; - vertical-align: middle; - background-size: 16px 16px; -} - -#filestable .filename .action .icon.hidden, -#filestable .selectedActions a .icon.hidden, -#controls .actions .button .icon.hidden { - display: none; -} - -#filestable .filename .action .icon.loading, -#filestable .selectedActions a .icon.loading, -#controls .actions .button .icon.loading { - width: 15px; - height: 15px; -} - -.app-files .actions .button.new .icon { - margin-bottom: 2px; -} - -.canDrop, -#filestable tbody tr.canDrop { - background-color: rgba(255, 255, 140, 1); -} - #app-content { z-index: 500; background-color: var(--color-main-background); @@ -863,6 +439,31 @@ html.ie8 #controls .button.new { min-height: 100%; } -.favcolumn { - width: 16px; +table td { + padding: 0 0px; + font-style: normal; + background-position: 8px center; + background-repeat: no-repeat; +} + +#fileList { + table-layout: fixed; + white-space: nowrap; +} + +#fileList tr td.favcolumn { + padding: 0 15px; + position: relative; + width: 0.1%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#fileList tr td.filename { + position: relative; + width: 99.9%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/js/main.js b/js/main.js index 94a2afc..0128b2c 100644 --- a/js/main.js +++ b/js/main.js @@ -19,7 +19,6 @@ $(function(){ var station_list = $("#app-content-files"); if ( ( $(window).scrollTop() + $(window).height() ) == $(document).height() ) { if(!station_list.data("didfire")) { - console.log("fire"); station_list.data("didfire", true); if ($('li.nav-files').hasClass('active')){ radio_query(1, "");