fix(browser): fix css issues

public/static/css/default.css

@@ -0,0 +1,481 @@
+.hidden {
+  display: none;
+}
+
+.txt-cap {
+  text-transform: capitalize;
+}
+
+.font-xs {
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+}
+
+.font-s {
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+}
+
+.font-m {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+}
+
+.font-l {
+  font-size: 1.8rem;
+  line-height: 2.7rem;
+}
+
+.font-xl {
+  font-size: 2rem;
+  line-height: 3rem;
+}
+
+.padding-xs {
+  padding: 0.25rem;
+}
+
+.padding-s {
+  padding: 0.5rem;
+}
+
+.padding-m {
+  padding: 1rem;
+}
+
+.padding-l {
+  padding: 2rem;
+}
+
+.padding-xl {
+  padding: 4rem;
+}
+
+.padding-l-xs {
+  padding-left: 0.25rem;
+}
+
+.padding-l-s {
+  padding-left: 0.5rem;
+}
+
+.padding-l-m {
+  padding-left: 1rem;
+}
+
+.padding-l-l {
+  padding-left: 2rem;
+}
+
+.padding-l-xl {
+  padding-left: 4rem;
+}
+
+.padding-r-xs {
+  padding-right: 0.25rem;
+}
+
+.padding-r-s {
+  padding-right: 0.5rem;
+}
+
+.padding-r-m {
+  padding-right: 1rem;
+}
+
+.padding-r-l {
+  padding-right: 2rem;
+}
+
+.padding-r-xl {
+  padding-right: 4rem;
+}
+
+.padding-t-xs {
+  padding-top: 0.25rem;
+}
+
+.padding-t-s {
+  padding-top: 0.5rem;
+}
+
+.padding-t-m {
+  padding-top: 1rem;
+}
+
+.padding-t-l {
+  padding-top: 2rem;
+}
+
+.padding-t-xl {
+  padding-top: 4rem;
+}
+
+.padding-b-xs {
+  padding-bottom: 0.25rem;
+}
+
+.padding-b-s {
+  padding-bottom: 0.5rem;
+}
+
+.padding-b-m {
+  padding-bottom: 1rem;
+}
+
+.padding-b-l {
+  padding-bottom: 2rem;
+}
+
+.padding-b-xl {
+  padding-bottom: 4rem;
+}
+
+.margin-xs {
+  margin: 0.25rem;
+}
+
+.margin-s {
+  margin: 0.5rem;
+}
+
+.margin-m {
+  margin: 1rem;
+}
+
+.margin-l {
+  margin: 2rem;
+}
+
+.margin-xl {
+  margin: 4rem;
+}
+
+.margin-l-xs {
+  margin-left: 0.25rem;
+}
+
+.margin-l-s {
+  margin-left: 0.5rem;
+}
+
+.margin-l-m {
+  margin-left: 1rem;
+}
+
+.margin-l-l {
+  margin-left: 2rem;
+}
+
+.margin-l-xl {
+  margin-left: 4rem;
+}
+
+.margin-r-xs {
+  margin-right: 0.25rem;
+}
+
+.margin-r-s {
+  margin-right: 0.5rem;
+}
+
+.margin-r-m {
+  margin-right: 1rem;
+}
+
+.margin-r-l {
+  margin-right: 2rem;
+}
+
+.margin-r-xl {
+  margin-right: 4rem;
+}
+
+.margin-t-xs {
+  margin-top: 0.25rem;
+}
+
+.margin-t-s {
+  margin-top: 0.5rem;
+}
+
+.margin-t-m {
+  margin-top: 1rem;
+}
+
+.margin-t-l {
+  margin-top: 2rem;
+}
+
+.margin-t-xl {
+  margin-top: 4rem;
+}
+
+.margin-b-xs {
+  margin-bottom: 0.25rem;
+}
+
+.margin-b-s {
+  margin-bottom: 0.5rem;
+}
+
+.margin-b-m {
+  margin-bottom: 1rem;
+}
+
+.margin-b-l {
+  margin-bottom: 2rem;
+}
+
+.margin-b-xl {
+  margin-bottom: 4rem;
+}
+
+.blue0-font {
+  color: #3498db;
+}
+
+.blue1-font {
+  color: #2980b9;
+}
+
+.cyan0-font {
+  color: #1abc9c;
+}
+
+.cyan1-font {
+  color: #16a085;
+}
+
+.purple0-font {
+  color: #9b59b6;
+}
+
+.purple1-font {
+  color: #8e44ad;
+}
+
+.red0-font {
+  color: #e74c3c;
+}
+
+.red1-font {
+  color: #c0392b;
+}
+
+.yellow0-font {
+  color: #f1c40f;
+}
+
+.yellow1-font {
+  color: #f39c12;
+}
+
+.yellow2-font {
+  color: #e67e22;
+}
+
+.yellow3-font {
+  color: #d35400;
+}
+
+.green0-font {
+  color: #2ecc71;
+}
+
+.green1-font {
+  color: #27ae60;
+}
+
+.green2-font {
+  color: #15cd3d;
+}
+
+.white-font {
+  color: #fff;
+}
+
+.white0-font {
+  color: #ecf0f1;
+}
+
+.white1-font {
+  color: #bdc3c7;
+}
+
+.grey0-font {
+  color: #95a5a6;
+}
+
+.grey1-font {
+  color: #7f8c8d;
+}
+
+.grey2-font {
+  color: #ecf0f6;
+}
+
+.grey3-font {
+  color: #697384;
+}
+
+.black-font {
+  color: #000;
+}
+
+.black0-font {
+  color: #34495e;
+}
+
+.black1-font {
+  color: #2c3e50;
+}
+
+.blue0-bg {
+  background-color: #3498db;
+}
+
+.blue1-bg {
+  background-color: #2980b9;
+}
+
+.blue2-bg {
+  background-color: #2f45c5;
+}
+
+.cyan0-bg {
+  background-color: #1abc9c;
+}
+
+.cyan1-bg {
+  background-color: #16a085;
+}
+
+.purple0-bg {
+  background-color: #9b59b6;
+}
+
+.purple1-bg {
+  background-color: #8e44ad;
+}
+
+.red0-bg {
+  background-color: #e74c3c;
+}
+
+.red1-bg {
+  background-color: #c0392b;
+}
+
+.yellow0-bg {
+  background-color: #f1c40f;
+}
+
+.yellow1-bg {
+  background-color: #f39c12;
+}
+
+.yellow2-bg {
+  background-color: #e67e22;
+}
+
+.yellow3-bg {
+  background-color: #15cd3d;
+}
+
+.yellow3-bg {
+  background-color: #d35400;
+}
+
+.green0-bg {
+  background-color: #2ecc71;
+}
+
+.green1-bg {
+  background-color: #27ae60;
+}
+
+.green2-bg {
+  background-color: #15cd3d;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.white0-bg {
+  background-color: #ecf0f1;
+}
+
+.white1-bg {
+  background-color: #bdc3c7;
+}
+
+.grey0-bg {
+  background-color: #95a5a6;
+}
+
+.grey1-bg {
+  background-color: #7f8c8d;
+}
+.grey2-bg {
+  background-color: #ecf0f6;
+}
+
+.grey3-bg {
+  color: #697384;
+}
+
+.black-bg {
+  background-color: #000;
+}
+
+.black0-bg {
+  background-color: #34495e;
+}
+
+.black1-bg {
+  background-color: #2c3e50;
+}
+
+.title-l {
+  font-size: 1.8rem;
+  font-weight: bold;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-l {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.title-m {
+  font-size: 1.4rem;
+  /* font-weight: bold; */
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}
+
+.desc-m {
+  font-size: 1.2rem;
+  line-height: 2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  display: block;
+}

public/static/css/white.css

@@ -3,6 +3,9 @@
 
 .theme-default #bg {
   background: url("/static/img/textured_paper.png") repeat fixed center;
+  width: 100%;
+  height: 100%;
+  padding: 0 0 2rem 0;
 }
 
 .theme-default #top-bar {
@@ -116,6 +119,7 @@
 .theme-default #browser .item-op {
   line-height: 4rem;
   padding: 1rem;
+  text-align: right;
 }
 
 .theme-default #browser .error {
@@ -144,13 +148,6 @@
   padding: 1rem;
 }
 
-/* .theme-default .op-bar {
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 5px 30px 0 rgba(31, 38, 135, 0.1);
-  backdrop-filter: blur(9.5px);
-  -webkit-backdrop-filter: blur(9.5px);
-} */
-
 .theme-default .red-btn {
   background-color: #e74c3c;
   color: #fff;
@@ -307,3 +304,11 @@
   font-size: 1.2rem;
   background-color: #ecf0f6;
 }
+
+#item-list .item-name-vertical {
+  width: 14rem;
+}
+
+#item-list .item-name-horizontal {
+  width: 48rem;
+}

src/client/web/src/components/browser.tsx

@@ -373,7 +373,7 @@ export class Browser extends React.Component<Props, State, {}> {
       }
     );
 
-    const nameCellClass = `item-name item-name-${
+    const nameWidthClass = `item-name item-name-${
       this.props.ui.isVertical ? "vertical" : "horizontal"
     } pointer`;
 
@@ -438,8 +438,7 @@ export class Browser extends React.Component<Props, State, {}> {
                     className="yellow0-font margin-r-m"
                   />,
 
-                  <span className="">
+                  <span className={`${nameWidthClass}`}>
-                    <span className={nameCellClass}>
                     <span
                       className="title-m"
                       onClick={() => this.gotoChild(item.name)}
@@ -451,13 +450,16 @@ export class Browser extends React.Component<Props, State, {}> {
                         {item.modTime.slice(0, item.modTime.indexOf("T"))}
                       </span>
                     </div>
-                    </span>
                   </span>,
                 ])}
+                childrenStyles={List([
+                  { flex: "0 0 auto" },
+                  { flex: "0 0 auto" },
+                ])}
               />
             </span>,
 
-            <span className={`padding-m ${showOp}`}>
+            <span className={`item-op padding-m ${showOp}`}>
               <button
                 onClick={() => this.select(item.name)}
                 className={`${
@@ -471,21 +473,24 @@ export class Browser extends React.Component<Props, State, {}> {
               </button>
             </span>,
           ])}
-          childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+          childrenStyles={List([
+            { flex: "0 0 auto", width: "60%" },
+            { flex: "0 0 auto", justifyContent: "flex-end", width: "40%" },
+          ])}
         />
       ) : (
         <div key={item.name}>
           <Flexbox
+            key={item.name}
             children={List([
-              <span className="padding-m">
               <Flexbox
                 children={List([
                   <RiFile2Fill
                     size="3rem"
-                      className="cyan0-font margin-r-m"
+                    className="cyan0-font margin-l-m margin-r-m"
                   />,
 
-                    <span className={`${nameCellClass}`}>
+                  <span className={`${nameWidthClass}`}>
                     <a
                       className="title-m"
                       href={`/v1/fs/files?fp=${itemPath}`}
@@ -502,14 +507,17 @@ export class Browser extends React.Component<Props, State, {}> {
                     </div>
                   </span>,
                 ])}
-                />
+                childrenStyles={List([
-              </span>,
+                  { flex: "0 0 auto" },
+                  { flex: "0 0 auto" },
+                ])}
+              />,
 
               <span className={`item-op padding-m ${showOp}`}>
                 <button
                   onClick={() => this.toggleDetail(item.name)}
-                  className="grey2-bg grey3-font margin-r-m"
+                  style={{ width: "8rem" }}
-                  style={{ width: "8rem", display: "inline-block" }}
+                  className="float-input"
                 >
                   {this.props.msg.pkg.get("detail")}
                 </button>
@@ -517,10 +525,10 @@ export class Browser extends React.Component<Props, State, {}> {
                 <button
                   type="button"
                   onClick={() => this.select(item.name)}
-                  className={`${
+                  className={`float-input ${
                     isSelected ? "cyan0-bg white-font " : "grey2-bg grey3-font "
                   }`}
-                  style={{ width: "8rem", display: "inline-block" }}
+                  style={{ width: "8rem" }}
                 >
                   {isSelected
                     ? this.props.msg.pkg.get("browser.deselect")
@@ -528,8 +536,12 @@ export class Browser extends React.Component<Props, State, {}> {
                 </button>
               </span>,
             ])}
-            childrenStyles={List([{}, { justifyContent: "flex-end" }])}
+            childrenStyles={List([
+              { flex: "0 0 auto", width: "60%" },
+              { flex: "0 0 auto", justifyContent: "flex-end", width: "40%" },
+            ])}
           />
+
           <div
             className={`${
               this.state.showDetail.has(item.name) ? "" : "hidden"
@@ -685,7 +697,7 @@ export class Browser extends React.Component<Props, State, {}> {
                         className="margin-r-m blue0-font"
                       />,
 
-                      <div className={`${nameCellClass}`}>
+                      <div className={`${nameWidthClass}`}>
                         <span className="title-m">{fileName}</span>
                         <div className="desc-m grey0-font">
                           {FileSize(uploading.uploaded, { round: 0 })}