benj design tweaks

2025-12-12 23:24:35 +01:00 · 2022-05-15 18:31:28 -07:00
parent 585a17573c
commit c023c8df71
8 changed files with 179 additions and 77 deletions
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -10,8 +10,10 @@ body {
 }

 .App {
-  background-image: url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png");
-  background-repeat: no-repeat;
+  background: url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png") no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
  background-size: cover;
 }

@@ -35,7 +37,8 @@ body {

 #DownloadProgress {
  position: absolute;
-  top: 15%;
+  transform: translate(0%, -50%);
+  top: 50%;
  left: 5%;
  width: 50%;
 }
@@ -63,11 +66,28 @@ body {

 .BottomSection {
  position: absolute;
-  top: 80%;
+	bottom: 0%;
+	left: 50%;
+	transform: translate(-50%, 0%);

-  height: 30%;
-  width: 100%;
+	width: 100%;
+	height: 160px;

-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(10px);
  box-shadow: inset 0px 5px 12px -3px rgb(50 50 50 / 75%);
+
+	margin: 0;
+	padding: 0;
 }
+
+@media(max-height: 580px) {
+    .BottomSection {
+        height: 150px;
+    }
+}
+
+@media(max-height: 500px) {
+    .BottomSection {
+        height: 140px;
+    }
+}
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -16,14 +16,14 @@ import NewsSection from './components/news/NewsSection'
 import RightBar from './components/RightBar'

 interface IProps {
-  [key: string]: never;
+    [key: string]: never;
 }

 interface IState {
-  isDownloading: boolean;
-  optionsOpen: boolean;
-  miniDownloadsOpen: boolean;
-  downloadsOpen: boolean;
+    isDownloading: boolean;
+    optionsOpen: boolean;
+    miniDownloadsOpen: boolean;
+    downloadsOpen: boolean;
 }

 const downloadHandler = new DownloadHandler()
@@ -35,7 +35,7 @@ class App extends React.Component<IProps, IState> {
      isDownloading: false,
      optionsOpen: false,
      miniDownloadsOpen: false,
-      downloadsOpen: false
+      downloadsOpen: false,
    }

    listen('lang_error', (payload) => {
@@ -59,25 +59,38 @@ class App extends React.Component<IProps, IState> {

        {
          // Mini downloads section
-          this.state.miniDownloadsOpen ? 
+          this.state.miniDownloadsOpen ? (
            <div className="MiniDownloads">
-              <MiniDialog title="Downloads" closeFn={() => {
-                this.setState({ miniDownloadsOpen: false })
-              }}>
+              <MiniDialog
+                title="Downloads"
+                closeFn={() => {
+                  this.setState({ miniDownloadsOpen: false })
+                }}
+              >
                <DownloadList downloadManager={downloadHandler} />
              </MiniDialog>
              <div className="arrow-down"></div>
-            </div> : null
+            </div>
+          ) : null
        }

        {
          // Download menu
-          this.state.downloadsOpen ? <Downloads downloadManager={downloadHandler} closeFn={() => this.setState({ downloadsOpen: false }) } /> : null
+          this.state.downloadsOpen ? (
+            <Downloads
+              downloadManager={downloadHandler}
+              closeFn={() => this.setState({ downloadsOpen: false })}
+            />
+          ) : null
        }

        {
          // Options menu
-          this.state.optionsOpen ? <Options closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null
+          this.state.optionsOpen ? (
+            <Options
+              closeFn={() => this.setState({ optionsOpen: !this.state.optionsOpen })}
+            />
+          ) : null
        }

        <div className="BottomSection">
--- a/src/ui/components/RightBar.css
+++ b/src/ui/components/RightBar.css
@@ -1,18 +1,20 @@
 .RightBar {
  position: absolute;
+  transform: translate(0%, 0%);

  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

-  height: 100vh;
-  width: 6%;
-  left: 94%;
+  height: calc(100vh - 190px);
+  width: 80px;
+  right: 0%;

  z-index: 99;

  background-color: rgba(77, 77, 77, 0.6);
+  z-index: 99;
 }

 .BarImg:hover {
@@ -32,4 +34,16 @@

 .RightBar img:hover {
  filter: invert(75%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
+}
+
+@media(max-height: 580px) {
+    .RightBar {
+        height: calc(100vh - 180px);
+    }
+}
+
+@media(max-height: 500px) {
+    .RightBar {
+        height: calc(100vh - 170px);
+    }
 }
--- a/src/ui/components/ServerLaunchSection.css
+++ b/src/ui/components/ServerLaunchSection.css
@@ -4,19 +4,22 @@
  justify-content: space-between;

  position: absolute;
-  left: 60%;
-  top: 5%;
+  transform: translate(0%, -50%);
+  right: 10%;
+  top: 50%;

  width: 30%;
-  height: 55%;
+  height: 80%;
+  min-width: 357px;
 }

 #playButton > div {
-  margin-top: 4px;
+  margin-bottom: 6px;
 }

 #playButton .BigButton {
  height: 100%;
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }

 #serverControls {
@@ -36,11 +39,17 @@

 #serverControls .CheckboxDisplay {
  margin-right: 6px;
+  box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.2);
 }

 #serverControls .Checkbox label {
  color: #fff;
  font-weight: bold;
+  text-shadow: #222222 1px 0 10px;
+}
+
+#serverControls .Checkbox label span {
+  padding-left: 4px;
 }

 .ServerLaunchButtons {
@@ -69,6 +78,9 @@
 .ServerConfig input {
  padding: 6px;
  border-radius: 6px;
+  height: 18px;
+
+  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
 }

 #ip {
@@ -77,4 +89,20 @@

 #port {
  width: 15%;
-}
+}
+
+@media (max-width: 1040px) {
+    #playButton {
+        right: 5%;
+    }
+}
+
+@media (max-width: 870px) {
+    #playButton {
+        min-width: 235px;
+    }
+
+    #officialPlay {
+        width: 40%;
+    }
+}
--- a/src/ui/components/common/Checkbox.css
+++ b/src/ui/components/common/Checkbox.css
@@ -7,7 +7,7 @@
  width: 20px;

  border: 2px solid #cecece;
-  border-radius: 2px;
+  border-radius: 4px;
 }

 .CheckboxDisplay:hover {
--- a/src/ui/components/common/ProgressBar.css
+++ b/src/ui/components/common/ProgressBar.css
@@ -49,6 +49,10 @@
  color: #fff !important;
 }

+.MainProgressBarWrapper .ProgressBar {
+  box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 20%);
+}
+
 .MainProgressBarWrapper:hover {
  cursor: pointer;
 }
--- a/src/ui/components/news/NewsSection.css
+++ b/src/ui/components/news/NewsSection.css
@@ -1,76 +1,97 @@
 .NewsSection {
-  background-color: rgba(106, 105, 106, 0.6);
+    background-color: rgba(106, 105, 106, 0.6);

-  display: flex;
-  flex-direction: column;
-  
-  position: absolute;
+    position: absolute;

-  height: 30%;
-  width: 40%;
+    min-height: 219px;
+    height: 30%;
+    width: 512px;

-  top: 20%;
-  left: 5%;
+    bottom: 35%;
+    left: 5%;
+}
+
+@media (max-width: 830px) {
+    .NewsSection {
+        width: 61%;
+    }
 }

 .NewsTabs {
-  background-color: rgba(77, 77, 77, 0.6);
+    background-color: rgba(77, 77, 77, 0.6);

-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;

-  font-weight: bold;
-  color: #fff;
+    font-weight: bold;
+    color: #fff;

-  width: 100%;
-  height: 20%;
+    width: 100%;
+    height: 43px;
 }

 .NewsTab {
-  height: 50%;
+    height: 50%;

-  margin: 0 10px;
+    margin: 0 10px;

-  text-align: center;
-  border-bottom: 1px solid transparent;
+    text-align: center;
+    border-bottom: 1px solid transparent;
 }

 .NewsTab:hover {
-  cursor: pointer;
+    cursor: pointer;
 }

 .NewsTab.selected {
-  border-bottom: 2px solid #ffc61e;
+    border-bottom: 2px solid #ffc61e;
 }

 .NewsContent {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  color: #fff;
+    display: block;
+    height: calc(100% - 43px);
+    width: 100%;
+    color: #fff;
 }

-.NewsContent::-webkit-scrollbar {
-  display: none;
+.NewsContent tbody {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+.NewsContent  tbody::-webkit-scrollbar {
+    display: none;
 }

 .Commit {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  color: #fff;
-
-  margin: 8px;
+    margin: 0;
+    color: #fff;
+    max-height: 42px;
 }

 .CommitAuthor {
-  font-weight: bold;
+    width: calc(100% * 0.4);
+    padding-left: 5px;
+    vertical-align: top;
+    font-weight: bold;
 }

 .CommitMessage {
-  width: 60%;
-}
+    width: calc(100% * 0.6);
+}
+
+.CommitMessage span {
+    display: -webkit-box;
+    width: 100%;
+    max-height: 42px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-bottom: 5px;
+}
--- a/src/ui/components/news/NewsSection.tsx
+++ b/src/ui/components/news/NewsSection.tsx
@@ -64,10 +64,10 @@ export default class NewsSection extends React.Component<IProps, IState> {
      const commitsList = obj.slice(0, 5)
      const commitsListHtml = commitsList.map((commit: any) => {
        return (
-          <div className="Commit" key={commit.sha}>
-            <div className="CommitAuthor">{commit.commit.author.name}</div>
-            <div className="CommitMessage">{commit.commit.message.substring(0, 50) + '...'}</div>
-          </div>
+          <tr className="Commit" key={commit.sha}>
+            <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
+            <td className="CommitMessage"><span>{commit.commit.message}</span></td>
+          </tr>
        )
      })

@@ -113,9 +113,11 @@ export default class NewsSection extends React.Component<IProps, IState> {
            <Tr text="news.latest_version" />
          </div>
        </div>
-        <div className="NewsContent">
-          {this.state.news}
-        </div>
+        <table className="NewsContent">
+            <tbody>
+                {this.state.news}
+            </tbody>
+        </table>
      </div>
    )
  }