sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: float and clear 

Fix other background-positions
Minor fix in link button icon position
Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
pull/47343/head
Mostafa Ahangarha 2023-12-23 19:46:25 +07:00 committed by nextcloud-command
parent 26f4b97b2b
commit c5baf3d7ef
12 changed files with 143 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/settings/css/settings.scss
Unescape Escape View File

@ -158,6 +158,13 @@ select {
}
}
body[dir='ltr'] .link-button.icon-file {
background-position: left 24px center;
}
body[dir='rtl'] .link-button.icon-file {
background-position: right 24px center;
}
.personal-settings-container {
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;

66
core/css/apps.scss
Unescape Escape View File

@ -157,7 +157,6 @@ kbd {
width: 100%;
padding: 10px;
padding-inline-start: 34px;
background-position: 10px center;
text-align: start;
margin: 0;
}
@ -321,7 +320,6 @@ kbd {
/* Main entry link */
> a {
background-size: 16px 16px;
background-position: 14px center;
background-repeat: no-repeat;
display: block;
justify-content: space-between;
@ -358,7 +356,7 @@ kbd {
/* counter can also be inside the link */
> .app-navigation-entry-utils {
display: inline-block;
float: right;
/* Check Floating fix below */
.app-navigation-entry-utils-counter {
padding-inline-end: 0 !important;
}
@ -662,6 +660,40 @@ kbd {
}
}
/* Floating and background-position fix */
/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] {
.app-navigation-personal,
.app-navigation-administration {
.app-navigation-new button {
background-position: left 10px center;
}
> ul > li > ul > li > a {
background-position: left 14px center;
> .app-navigation-entry-utils {
float: right;
}
}
}
}
body[dir='rtl'] {
.app-navigation-personal,
.app-navigation-administration {
.app-navigation-new button {
background-position: right 10px center;
}
> ul > li > ul > li > a {
background-position: right 14px center;
> .app-navigation-entry-utils {
float: left;
}
}
}
}
/* CONTENT --------------------------------------------------------- */
#content {
@ -857,7 +889,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
&::before {
background-image: var(--icon-settings-dark);
background-position: 14px center;
background-repeat: no-repeat;
content: '';
width: var(--default-clickable-area);
@ -869,11 +900,27 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
&:focus-visible {
box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
background-position: 12px center;
}
}
}
/* Background-position fix */
body[dir='ltr'] #app-settings-header .settings-button {
&::before {
background-position: left 14px center;
}
&:focus-visible {
background-position: left 12px center;
}
}
body[dir='rtl'] #app-settings-header .settings-button {
&::before {
background-position: right 14px center;
}
&:focus-visible {
background-position: right 12px center;
}
}
/* GENERAL SECTION ------------------------------------------------------------ */
.section {
display: block;
@ -971,12 +1018,19 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
}
}
.tabsContainer {
clear: left;
.tab {
padding: 0 15px 15px;
}
}
/* Cannot use inline-start to support Samsung Internet*/
body[dir='ltr'] .tabsContainer {
clear: left;
}
body[dir='rtl'] .tabsContainer {
clear: right;
}
/* POPOVER MENU ------------------------------------------------------------ */
$popoveritem-height: 34px;
$popovericon-size: 16px;

52
core/css/global.scss
Unescape Escape View File

@ -7,20 +7,52 @@
/* Global Components */
.pull-left {
float: left;
}
/* The following lines are a hacky way to adjust float and clear based on direction.
Samsung Internet doesn't support `inline-start|end` and :dir.
pull-right|left and clear-right|left are also kept for backward compatibility.
*/
body[dir='ltr'] {
.pull-left,
.pull-start {
float: left;
}
.pull-right {
float: right;
}
.pull-right,
.pull-end {
float: right;
}
.clear-left,
.clear-start {
clear: left;
}
.clear-left {
clear: left;
.clear-right,
.clear-end {
clear: right;
}
}
.clear-right {
clear: right;
body[dir='rtl'] {
.pull-left,
.pull-start {
float: right;
}
.pull-right,
.pull-end {
float: left;
}
.clear-left,
.clear-start {
clear: right;
}
.clear-right,
.clear-end {
clear: left;
}
}
.clear-both {

13
core/css/guest.scss
Unescape Escape View File

@ -591,14 +591,19 @@ p.info {
margin-inline-end: 25px;
}
img.float-spinner {
float: left;
}
a.update-show-detailed {
border-bottom: inherit;
}
}
/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] .update img.float-spinner {
float: left;
}
body[dir='rtl'] .update img.float-spinner {
float: right;
}
#update-progress-detailed {
text-align: start;
margin-bottom: 12px;

14
core/css/header.scss
Unescape Escape View File

@ -31,7 +31,7 @@
bottom: 2px;
}
.header-right {
.header-end {
// Add some spacing so the last entry looks ok
margin-inline-end: calc(3 * var(--default-grid-baseline));
@ -88,7 +88,7 @@
/* Header menu */
$header-menu-entry-height: 44px;
.header-right > div > .menu {
.header-end > div > .menu {
background-color: var(--color-main-background);
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
border-radius: var(--border-radius-large);
@ -146,25 +146,25 @@
flex-shrink: 0;
}
#header-left, .header-left,
#header-right, .header-right {
#header-start, .header-start,
#header-end, .header-end {
display: inline-flex;
align-items: center;
}
#header-left, .header-left {
#header-start, .header-start {
flex: 1 0;
white-space: nowrap;
min-width: 0;
}
#header-right, .header-right {
#header-end, .header-end {
justify-content: flex-end;
flex-shrink: 1;
}
/* Right header standard */
.header-right {
.header-end {
> .header-menu__trigger img {
filter: var(--background-image-invert-if-bright);
}

4
core/css/mobile.scss
Unescape Escape View File

@ -132,7 +132,7 @@
}
@media only screen and (max-width: 480px) {
#header .header-right > div > .menu {
#header .header-end > div > .menu {
max-width: calc(100vw - 10px);
position: fixed;
&::after {
@ -140,7 +140,7 @@
}
}
/* Arrow directly child of menutoggle */
#header .header-right > div {
#header .header-end > div {
&.openedMenu {
&::after {
display: block;

2
core/css/public.scss
Unescape Escape View File

@ -14,7 +14,7 @@
--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline));
}
.header-right {
.header-end {
#header-primary-action a {
color: var(--color-primary-element-text);

7
core/css/styles.scss
Unescape Escape View File

@ -248,8 +248,15 @@ body {
position: absolute;
inset-inline-end: 1em;
top: .8em;
}
/* Cannot use inline-start and :dir to support Samsung Internet */
body[dir='ltr'] #show, #dbpassword {
float: right;
}
body[dir='ltr'] #show, #dbpassword {
float: left;
}
#show + label, #dbpassword + label {
inset-inline-end: 21px;

4
core/js/public/publicpage.js
Unescape Escape View File

@ -5,7 +5,7 @@
window.addEventListener('DOMContentLoaded', function () {
$('#body-public').find('.header-right .menutoggle').click(function() {
$('#body-public').find('.header-end .menutoggle').click(function() {
$(this).next('.popovermenu').toggleClass('open');
});
@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', function () {
});
$(document).mouseup(function(e) {
var toggle = $('#body-public').find('.header-right .menutoggle');
var toggle = $('#body-public').find('.header-end .menutoggle');
var container = toggle.next('.popovermenu');
// if the target of the click isn't the menu toggle, nor a descendant of the

2
core/src/components/MainMenu.js
Unescape Escape View File

@ -17,7 +17,7 @@ export const setUp = () => {
},
})
const container = document.getElementById('header-left__appmenu')
const container = document.getElementById('header-start__appmenu')
if (!container) {
// no container, possibly we're on a public page
return

4
core/templates/layout.public.php
Unescape Escape View File

@ -44,7 +44,7 @@ p($theme->getTitle());
</div>
<header id="header">
<div class="header-left">
<div class="header-start">
<div id="nextcloud" class="header-appname">
<?php if ($_['logoUrl']): ?>
<a href="<?php print_unescaped($_['logoUrl']); ?>"
@ -72,7 +72,7 @@ p($theme->getTitle());
</div>
</div>
<div class="header-right">
<div class="header-end">
<?php
/** @var \OCP\AppFramework\Http\Template\PublicTemplateResponse $template */
if (isset($template) && $template->getActionCount() !== 0) {

6
core/templates/layout.user.php
Unescape Escape View File

@ -63,17 +63,17 @@ p($theme->getTitle());
</div>
<header id="header">
<div class="header-left">
<div class="header-start">
<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
aria-label="<?php p($l->t('Go to %s', [$_['logoUrl'] ?: $_['defaultAppName']])); ?>"
id="nextcloud">
<div class="logo logo-icon"></div>
</a>
<nav id="header-left__appmenu"></nav>
<nav id="header-start__appmenu"></nav>
</div>
<div class="header-right">
<div class="header-end">
<div id="unified-search"></div>
<div id="notifications"></div>
<div id="contactsmenu"></div>