From e8449752896f511427ebf206181c1ea3a95be6f8 Mon Sep 17 00:00:00 2001
From: Felix Kopp <felix-source@phorax.com>
Date: Thu, 5 Feb 2015 22:07:05 +0100
Subject: [PATCH] [TASK] Reduce App-Icon size in Module menu and Topbar
Decrease size of App-Icons to reduce the visual relevance
from 32x32px to 28x28px. Following paddings and snap mode.
Kudos to Benjamin Kott.
Resolves: #64889
Releases: master
Change-Id: I8e3219cf492415e94dc74d656ef42543bf36cfca
Reviewed-on: http://review.typo3.org/36685
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Daniel Maier <dani-maier@gmx.de>
Tested-by: Daniel Maier <dani-maier@gmx.de>
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Markus Klein <klein.t3@reelworx.at>
---
typo3/js/extjs/viewportConfiguration.js | 2 +-
.../Private/Styles/TYPO3/_main_content.less | 4 ++--
.../Private/Styles/TYPO3/_module_menu.less | 6 +++---
.../Resources/Private/Styles/TYPO3/_topbar.less | 2 +-
.../t3skin/Resources/Public/Css/visual/t3skin.css | 14 +++++++-------
5 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/typo3/js/extjs/viewportConfiguration.js b/typo3/js/extjs/viewportConfiguration.js
index ff76c5e85b13..ab98890a8f42 100644
--- a/typo3/js/extjs/viewportConfiguration.js
+++ b/typo3/js/extjs/viewportConfiguration.js
@@ -86,7 +86,7 @@ TYPO3.Viewport.configuration = {
var containerWidth = adjWidth,
moduleMenuWidth = document.getElementById('typo3-menu').clientWidth,
moduleMenuMinWidth = 100,
- moduleMenuSnappedWidth = 50,
+ moduleMenuSnappedWidth = 46,
moduleMenuSnappingClass = 'typo3-module-menu-snapped',
forceSnapMode = (containerWidth <= moduleMenuMinWidth);
if (forceSnapMode){
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
index fea9eba6a7a6..9f5c1d24e438 100644
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_content.less
@@ -4,8 +4,8 @@
// Menu icons
@app-icon-border-radius: @border-radius-small;
-@app-icon-height: 32px;
-@app-icon-width: 32px;
+@app-icon-height: 28px;
+@app-icon-width: 28px;
@app-icon-font-size: 21px;
@app-icon-bg: #484848;
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
index 5dca4272c971..2f0cd08ae4d5 100644
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
@@ -121,7 +121,7 @@
.typo3-module-menu-item-title {
white-space: nowrap;
text-overflow: ellipsis;
- padding-top: 7px;
+ padding-top: 5px;
display: block;
overflow: hidden;
*zoom: 1;
@@ -132,7 +132,7 @@
.transition(all 0.25s ease-in-out);
.rotate(90deg);
position: absolute;
- top: 17px;
+ top: 15px;
right: 18px;
}
}
@@ -159,4 +159,4 @@
.typo3-module-menu-item-title {
display: none;
}
-}
\ No newline at end of file
+}
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
index d275e3a3a8fb..22760e4338ef 100644
--- a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
+++ b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_topbar.less
@@ -236,7 +236,7 @@
.submodule-label {
white-space: nowrap;
text-overflow: ellipsis;
- padding-top: 7px;
+ padding-top: 5px;
display: block;
overflow: hidden;
*zoom: 1;
diff --git a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
index f59f0b299a96..f3e0e6036717 100644
--- a/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
@@ -9823,8 +9823,8 @@ em {
position: relative;
display: inline-block;
padding: 0px;
- height: 32px;
- width: 32px;
+ height: 28px;
+ width: 28px;
overflow: hidden;
border-radius: 2px;
background-color: #484848;
@@ -9840,8 +9840,8 @@ em {
vertical-align: middle;
}
.typo3-app-icon img {
- max-height: 32px;
- max-width: 32px;
+ max-height: 28px;
+ max-width: 28px;
}
.typo3-app-icon .fa {
font-size: 21px;
@@ -10334,7 +10334,7 @@ iframe {
[id="typo3-menu"] .typo3-module-menu-item-title {
white-space: nowrap;
text-overflow: ellipsis;
- padding-top: 7px;
+ padding-top: 5px;
display: block;
overflow: hidden;
*zoom: 1;
@@ -10351,7 +10351,7 @@ iframe {
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
- top: 17px;
+ top: 15px;
right: 18px;
}
[id="typo3-menu"] .expanded .typo3-module-menu-group-title .caret {
@@ -10594,7 +10594,7 @@ iframe {
.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-label {
white-space: nowrap;
text-overflow: ellipsis;
- padding-top: 7px;
+ padding-top: 5px;
display: block;
overflow: hidden;
*zoom: 1;
--
GitLab