Merge pull request #1012 from AllanOcelot/styling_boss_single

Styling: Boss Single Page
the-hideout · Dec 9, 2024 · 04d30ed · 04d30ed
2 parents 20a214d + 0a290ba
commit 04d30ed
Show file tree

Hide file tree

Showing 4 changed files with 281 additions and 225 deletions.
diff --git a/src/components/property-list/index.css b/src/components/property-list/index.css
@@ -2,27 +2,51 @@
     display: flex;
     flex-flow: wrap;
     gap: 5px;
-    margin-top: 25px;
-    margin-bottom: 25px;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .property-wrapper {
+    display: flex;
     align-items: center;
+    align-items: flex-start;
+    flex-direction: column;
     background-color: #2d2d2f;
     border: 1px solid #1b1919;
-    display: flex;
     flex-basis: calc(50% - 2.5px);
     padding: 10px 20px;
+    flex: 1 auto;
+}
+
+.property-wrapper.large {
+    min-width: 100%;
+    max-width: none;
+}
+
+.property-wrapper.health {
+  max-width: 160px;
 }
 
 .property-key-wrapper {
+    cursor: default;
+    display: inline-block;
     color: #636363;
-    font-size: 14px;
+    font-size: 18px;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.property-wrapper .item {
+  white-space: normal;
 }
+.property-wrapper .item p {
+    margin: 0;
+}
+
 
 @media screen and (min-width: 800px) {
     .property-wrapper {
-        flex-basis: 10%;
+/*        flex-basis: 10%; */
         white-space: nowrap;
     }
 }
diff --git a/src/components/property-list/index.js b/src/components/property-list/index.js
@@ -38,26 +38,26 @@ function PropertyList({ properties, id }) {
         <div className="property-list">
             {data.map(([property, value]) => {
                 return (
-                    <div className="property-wrapper" key={property}>
-                        <div>
-                            {value.value}
-                            <div className="property-key-wrapper">
-                                <ConditionalWrapper
-                                    condition={value.tooltip}
-                                    wrapper={(children) => 
-                                        <Tippy
-                                            content={value.tooltip}
-                                            placement="bottom"
-                                        >
-                                            <div>{children}</div>
-                                        </Tippy>
-                                    }
-                                >
-                                    {value.label ? value.label : t(property)}
-                                </ConditionalWrapper>
-                            </div>
-                        </div>
-                    </div>
+                    <div className={`property-wrapper ${value.value.length >= 40 ? 'large' : ''} ${property}`}  key={property}>
+                      <div className="property-key-wrapper title">
+                          <ConditionalWrapper
+                              condition={value.tooltip}
+                              wrapper={(children) => 
+                                  <Tippy
+                                      content={value.tooltip}
+                                      placement="bottom"
+                                  >
+                                      <div>{children}</div>
+                                  </Tippy>
+                              }
+                          >
+                              {value.label ? value.label : t(property)}
+                          </ConditionalWrapper>
+                      </div>
+                      <div className="item">
+                        <p>{value.value}</p>
+                      </div>
+                  </div>
                 );
             })}
         </div>

diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
@@ -1,79 +1,143 @@
-.killa-party-time {
-    margin-top: 5rem;
+/* Main page wrapper */
+.boss-page-wrapper {
+  margin: 0 auto 100px auto;
+  max-width: 1200px;
+  padding-top: 20px;
+  position: relative;
 }
 
-.killa-party-time-text {
-    font-size: 1rem;
-}
 
-.boss-page-wrapper {
-    margin: 0 auto 100px auto;
-    max-width: 1200px;
-    padding-top: 10px;
-    position: relative;
+.information-section {
+    background: #0000001a;
+    border: 1px solid #ffffff1a;
+    border-radius: 0 20px 0 20px;
+    margin-bottom: 50px;
+    overflow: hidden;
 }
-
-.boss-page-wrapper h2 {
-    margin-top: 40px;
-    font-size: 24px;
+.information-section.has-table {
+    border-radius: 0 20px 0 0;
 }
 
-.boss-information-grid h1 {
-    align-items: center;
+.information-section h2 {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+    font-size: 24px;
+    margin: 0;
+    padding: 15px 20px;
+    background: #0000004d;
+    color: #c7c5b3;
+}
+.information-section h2 svg {
+    width: 1.6rem !important;
+    height: auto !important;
+    margin: 0 12px 0 0;
+}
+.information-section .content {
+  padding: 20px;
+}
+.information-section .content p {
+  margin: 0;
 }
 
-.boss-information-grid h1,
-.boss-icon-and-link-wrapper {
-    margin: 0 0 10px 0;
+
+
+/* Top Section */
+.boss-information-wrapper {
+    display: flex;
+    background: #0000001a;
+    border: 1px solid #7a6f5494;
+    margin-bottom: 50px;
+    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.034);
+    overflow: hidden;
+    min-height: 425px;
 }
 
-.boss-information-icon {
-    width: 64px;
-    height: 64px;
-    cursor: zoom-in;
+.boss-icon-cont {
+    border-left: 1px solid #9a8866ad;
+    background: #3b31203d;
+    display: flex;
+    min-width: 350px;
+    height: inherit;
+    align-items: center;
+    justify-content: center;
+    position: relative;
 }
 
 .boss-icon-and-link-wrapper {
-    align-items: flex-start;
-    display: none;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    cursor: zoom-in;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background-size: cover;
+    background-position: center center;
 }
 
-@media screen and (min-width: 800px) {
-    .boss-page-wrapper {
-        padding-top: 20px;
-    }
-
-    .boss-information-wrapper {
-        flex-grow: 1;
-    }
-
-    .boss-information-grid {
-        display: flex;
-    }
+.boss-top-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 auto;
+    max-width: 850px;
+}
+.boss-top-content .title-bar {
+    display: flex;
+    align-items: center;
+    background: #0000004d;
+    padding: 10px 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+}
+.boss-top-content .boss-information-icon {
+  display: none;
+  width: 124px;
+  margin: 20px auto;
+  height: 124px;
+  border: 1px solid rgba(255,255,255,.5);
+}
+.boss-top-content .title-bar h1 {
+    display: inline-block;
+    color: #c7c5b3;
+    align-items: center;
+    justify-content: space-between;
+    cursor: default;
+    margin: 0;
+}
+.boss-top-content .title-bar .wiki-link-wrapper {
+    margin: auto 0 auto auto;
+    opacity: 0.9;
+    transition-delay: .3s;
+}
+.boss-top-content .title-bar .wiki-link-wrapper:hover {
+    opacity: 1;
+    transition: all .1s;
+}
 
-    .boss-information-grid h1 img {
-        display: none;
-    }
 
-    .boss-details {
-        margin-right: 1em;
-    }
+.boss-top-content .main-content {
+    padding: 20px 20px 0 20px;
+}
+.boss-top-content .boss-properties {
+    padding: 0 20px;
+    margin-top: auto;
+    margin-bottom: 0;
+}
+.boss-top-content .main-content p.boss-details {
+    margin: 0 0 20px 0;
+}
+.boss-top-content .main-content p.boss-details h3 {
+    margin-top: 0;
+}
 
-    .boss-information-grid h1,
-    .boss-icon-and-link-wrapper {
-        margin: 0;
-    }
 
-    .boss-icon-and-link-wrapper {
-        display: flex;
-    }
+@media screen and (max-width: 960px){
+  .boss-information-wrapper {
+    min-height: none;
+  }
+  .boss-icon-cont {
+     display: none;
+  }
 
-    .boss-icon-and-link-wrapper img {
-        max-height: 200px;
-    }
+  .boss-top-content .boss-information-icon {
+    display: inline-block;
+  }
 }