From 0a093e1ed131d73a73e78bae1d5d4b0f3b698e2e Mon Sep 17 00:00:00 2001 From: qewer <69015181+qewer33@users.noreply.github.com> Date: Sun, 27 Aug 2023 21:27:53 +0300 Subject: [PATCH] StartPage: Visual overhaul and CSS fixes (#10391) * StartPage visual overhaul and CSS fixes * Add qewer33 to CONTRIBUTORS --- src/Doc/CONTRIBUTORS | 1 + src/Mod/Start/StartPage/CMakeLists.txt | 6 +- src/Mod/Start/StartPage/StartPage.css | 317 +++++++++++------- src/Mod/Start/StartPage/StartPage.html | 164 +++++---- src/Mod/Start/StartPage/StartPage.py | 14 +- src/Mod/Start/StartPage/TranslationTexts.py | 3 + .../Start/StartPage/images/icon_activity.png | Bin 0 -> 1954 bytes src/Mod/Start/StartPage/images/icon_blog.png | Bin 0 -> 1210 bytes .../Start/StartPage/images/icon_documents.png | Bin 0 -> 865 bytes src/Mod/Start/StartPage/images/icon_help.png | Bin 0 -> 1314 bytes .../Start/StartPage/images/icon_settings.png | Bin 0 -> 1780 bytes src/Mod/Start/StartPage/images/settings.png | Bin 1637 -> 0 bytes 12 files changed, 303 insertions(+), 202 deletions(-) create mode 100644 src/Mod/Start/StartPage/images/icon_activity.png create mode 100644 src/Mod/Start/StartPage/images/icon_blog.png create mode 100644 src/Mod/Start/StartPage/images/icon_documents.png create mode 100644 src/Mod/Start/StartPage/images/icon_help.png create mode 100644 src/Mod/Start/StartPage/images/icon_settings.png delete mode 100644 src/Mod/Start/StartPage/images/settings.png diff --git a/src/Doc/CONTRIBUTORS b/src/Doc/CONTRIBUTORS index f2d9bada42..2c7e2c109f 100644 --- a/src/Doc/CONTRIBUTORS +++ b/src/Doc/CONTRIBUTORS @@ -206,6 +206,7 @@ Willem Wurstwasser yang12 Yorik van Havre (yorikvanhavre) +Yunus Erdem Ergül (qewer33) zararina Zdeněk Havlík Zheng Lei (realthunder) diff --git a/src/Mod/Start/StartPage/CMakeLists.txt b/src/Mod/Start/StartPage/CMakeLists.txt index 44de6556f8..b09ccbea0e 100644 --- a/src/Mod/Start/StartPage/CMakeLists.txt +++ b/src/Mod/Start/StartPage/CMakeLists.txt @@ -25,13 +25,17 @@ SET(StartPage_ImageResources images/freecad.png images/installed.png images/new_file_thumbnail.svg - images/settings.png + images/icon_settings.png images/new_empty_file.png images/new_import_file.png images/new_parametric_part.png images/new_csg_part.png images/new_2d_draft.png images/new_architecture.png + images/icon_documents.png + images/icon_help.png + images/icon_activity.png + images/icon_blog.png ) SET(StartPage_Resources diff --git a/src/Mod/Start/StartPage/StartPage.css b/src/Mod/Start/StartPage/StartPage.css index 46720d94cd..418427efde 100644 --- a/src/Mod/Start/StartPage/StartPage.css +++ b/src/Mod/Start/StartPage/StartPage.css @@ -1,18 +1,23 @@ +/* --- MAIN --- */ + html { height: 100%; + color: BGTCOLOR; display: flex; flex-direction: column; + overflow: hidden; } body { + height: 100%; background: BACKGROUND; color: BGTCOLOR; font-family: FONTFAMILY; font-size: FONTSIZE; - height: 100%; + overflow: hidden; } -OVERFLOW +OVERFLOW a, a:link, a:visited { @@ -29,113 +34,166 @@ h1 { h2 { text-align: center; clear: both; - padding-top: 15px; -} - -hr { - height: 20px; - border: none; + padding-top: 5px; } .hidden { - display: none; + display: none !important; +} + +#main-container { + display: flex; + flex-direction: column; + height: calc(100% - 40px); + margin: 20px; + background: BASECOLOR; + border-radius: 15px; +} + +#title-bar { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; + height: 5.5em; + min-height: 5.5em; + background: BASECOLOR; + border-radius: 15px; + z-index: 2; +} + +.welcome { + display: flex; + align-items: center; + color: TEXTCOLOR; + font-size: 1.3em; + margin-left: 25px; + font-weight: bold; +} + +.welcome img { + width: 28px; + height: 28px; + margin-right: 10px; } .version { - font-size: 0.8em; - float: right; - padding-right: 10px; + font-size: 1em; + margin-right: 25px; } .settingsicon { - width: 16px; - height: 16px; - margin-left: 20px; + width: 22px; + height: 22px; + margin-left: 10px; vertical-align: middle; } -.container { - margin: 2%; - height: 95%; +@media only screen and (max-width: 1100px) { + .welcome { + display: none; + } + + .version { + display: none; + } } +/* --- TABS --- */ + ul.tabs { - margin: 9px 0; + display: flex; + position: absolute; + top: 2em; + left: 50%; + transform: translateX(-50%); } ul.tabs li { list-style: none; - display: inline; } ul.tabs li a { + display: flex; + align-items: center; + border-radius: 8px; + padding: 6px 12px; + margin: 0 3px; color: TEXTCOLOR; - background-color: BOXCOLOR; - padding: 8px 14px 8px 14px; text-decoration: none; - font-size: 1em; - font-weight: bold; - text-transform: uppercase; - border: 1px solid BOXCOLOR; - border-radius: 3px 3px 0px 0px; - box-shadow: #445 0 -5px 5px; outline: 0; + font-size: 1.3em; + transition: 100ms; +} + +ul.tabs li a img { + margin-right: 5px; } ul.tabs li a:hover { - background-color: TEXTCOLOR; - color: BASECOLOR; - border-color: TEXTCOLOR; + background-color: BOXCOLOR; } ul.tabs li a.active, ul.tabs li a.active:hover { - color: TEXTCOLOR; - background-color: BASECOLOR; - border-bottom: 1px solid BASECOLOR; - border-color: BASECOLOR; + background-color: BOXCOLOR; + font-weight: bold; } .panel { - background: BASECOLOR; + display: flex; + flex-direction: column; color: TEXTCOLOR; padding: 15px; - clear: both; - margin-bottom: 10px; - border-radius: 0px 3px 3px 3px; + padding-top: 0; overflow: auto; - box-shadow: SHADOW 0 2px 5px; +} + +.footnote { + text-align: center; + display: block; /* footnote tips display */ + clear: both; + padding-top: 10px; +} + +/* --- DOCUMENTS TAB --- */ + +.thumbnails ul { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: 0; + padding: 0; } ul.icons { clear: both; } -.icon { +.file-card { list-style: none; display: inline; - float: left; - padding: 5px 0px 15px 10px; + padding: 10px 0px 15px 10px; width: 138px; height: 200px; background: BOXCOLOR; - border-radius: 3px; + border-radius: 8px; margin: 10px; - box-shadow: SHADOW 0 0px 6px; word-wrap: break-word; } -.icon h4 { +.file-card h4 { margin: 3px 0; max-width: 90%; } -.icon img { +.file-card img { width: 128px; height: 128px; + border-radius: 4px; } -.icon p { +.file-card p { margin: 0; } @@ -154,65 +212,118 @@ a .caption:visited { text-decoration-color: TEXTCOLOR; } -.icon-new-template { +.quickstart-button-card { list-style: none; display: flex; align-items: center; float: left; padding: 5px 10px; - width: 235px; - height: 70px; + width: 18em; + height: 5em; background: BOXCOLOR; - border-radius: 3px; + border-radius: 8px; margin: 10px; - box-shadow: SHADOW 0 0px 6px; word-wrap: break-word; } -.icon-new-template a { +.quickstart-button-card a { display: flex; } -.icon-new-template h3 { - margin: 3px 0; +.quickstart-button-card h3 { max-width: 90%; - text-align: left; + margin: 3px 0; margin-bottom: 5px; + text-align: left; } -.icon-new-template img { +.quickstart-button-card img { width: 64px; height: 64px; margin-right: 10px; } -.icon-new-template p { +.quickstart-button-card p { margin: 0; } -.docbox a:hover { - text-decoration: underline; +.notes { + display: none; /* notes display */ + /* don't change this line */ + width: 100%; +} + +#notepad { + width: calc(100% - 30px); + min-height: 300px; + margin: 10px; + color: TEXTCOLOR; + background: BOXCOLOR; + border: none; + padding: 10px; + border-radius: 8px; +} + +#notepad:focus { + outline: none; +} + +/* --- HELP TAB --- */ + +#help-tab-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: center; } .docbox { - float: left; padding: 10px; max-width: 360px; background: BOXCOLOR; - border-radius: 3px; + border-radius: 8px; margin: 10px; - box-shadow: SHADOW 0 0px 6px; } .docbox h2 { text-align: center; } +.docbox h3 { + display: flex; + align-items: center; +} + .docbox img { max-width: 24px; max-height: 24px; + margin-right:10px; } +.docbox a:hover { + text-decoration: underline; +} + +.workbenches li, +.addonslist li { + display: flex; + align-items: center; + width: 50%; + float: left; + margin-bottom: 5px; +} + +.workbenches li img { + margin-right: 5px; +} + +ul.workbenches, +ul.addonslist { + overflow: hidden; + padding: 10px; +} + +/* --- ACTIVITY TAB --- */ + .forum img { max-width: 100% !important; max-height: 100% !important; @@ -222,13 +333,6 @@ a .caption:visited { max-width: 98%; } -h3 a { - height: 32px; - vertical-align: middle; - padding-bottom: 18px; - padding-left: 5px; -} - #commits ul { margin: 30px 0; } @@ -238,31 +342,8 @@ h3 a { margin-bottom: 10px; } -.footnote { - text-align: center; - display: block; - /* footnote tips display */ - clear: both; - padding-top: 10px; -} - -ul.workbenches, -ul.addonslist { - overflow: hidden; - padding: 10px; -} - -ul.workbenches li, -ul.addonslist li { - list-style: none; - float: left; - display: inline; - width: 50%; -} - .forum { - display: none; - /* forum display */ + display: none; /* forum display */ /* don't change this line */ } @@ -270,41 +351,23 @@ ul.addonslist li { white-space: pre-wrap; } -.thumbnails { - float: left; - width: 100%; - /* thumbs display */ - /* don't change this line */ +/* --- SCROLLBAR STYLE --- */ + +::-webkit-scrollbar { + width: 20px; + background: BASECOLOR; + padding: 2px; } -.notes { - display: none; - /* notes display */ - /* don't change this line */ - float: right; - width: 30%; -} - -#notepad { - width: 95%; - height: 100%; - color: TEXTCOLOR; +::-webkit-scrollbar-thumb { background: BOXCOLOR; - border: none; - padding: 5px; - border-radius: 3px; - min-height: 300px; + -webkit-border-radius: 999px; + background-clip: content-box; + border: 6px solid transparent; } - -.iframe { - display: block; - margin: auto; - text-align: center; - width: 50%; - height: 100%; -} - -.iframecontainer { - height: 90%; +::-webkit-scrollbar-thumb:hover { + background: TEXTCOLOR; + background-clip: content-box; + border: 6px solid transparent; } \ No newline at end of file diff --git a/src/Mod/Start/StartPage/StartPage.html b/src/Mod/Start/StartPage/StartPage.html index fa3c7af324..e852d2b616 100644 --- a/src/Mod/Start/StartPage/StartPage.html +++ b/src/Mod/Start/StartPage/StartPage.html @@ -12,22 +12,46 @@ -
-
+
+
+
VERSIONSTRING T_VTOOLTIP
+
+
+ freecad +

T_WELCOME

+
-
@@ -60,77 +84,77 @@ FreeCAD blog">BLOG