style(web): Responsive styles for home page (#985)

labring · Mar 31, 2023 · b7f75cf · b7f75cf
1 parent 63cc523
commit b7f75cf
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx
@@ -45,7 +45,7 @@ function HomePage() {
   return (appListQuery.data?.data || []).length === 0 ? (
     <Empty />
   ) : (
-    <div className="w-8/12 mt-10 mx-auto flex flex-col">
+    <div className="w-11/12 lg:w-8/12 mt-10 mx-auto flex flex-col">
       <List
         appListQuery={appListQuery}
         setShouldRefetch={() => {

diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
@@ -79,7 +79,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
       </div>
 
       <div className="flex flex-col overflow-auto">
-        <Box bg={bg} className="flex-none flex rounded-lg h-12 items-center px-6 mb-3">
+        <Box bg={bg} className="flex-none flex rounded-lg h-12 items-center px-3 lg:px-6 mb-3">
           <div className="w-3/12 text-second ">{t("HomePanel.Application") + t("Name")}</div>
           <div className="w-2/12 text-second ">App ID</div>
           <div className="w-2/12 text-second pl-2">{t("HomePanel.State")}</div>
@@ -95,7 +95,7 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                 <Box
                   key={item?.appid}
                   bg={bg}
-                  className="flex rounded-lg py-4 items-center px-6 mb-3 group"
+                  className="flex rounded-lg py-4 items-center px-3 lg:px-6 mb-3 group"
                 >
                   <div className="w-3/12 ">
                     <div className="font-bold text-lg">
@@ -122,7 +122,10 @@ function List(props: { appListQuery: any; setShouldRefetch: any }) {
                     <p className="mt-1">
                       {t("EndTime")}: {formatDate(item.subscription.expiredAt)}
                       <CreateAppModal application={item} type="renewal">
-                        <a className="text-primary-500 hidden group-hover:inline ml-2" href="/edit">
+                        <a
+                          className="text-primary-500 invisible group-hover:visible group-hover:inline-block ml-2"
+                          href="/edit"
+                        >
                           {t("Renew")}
                         </a>
                       </CreateAppModal>

diff --git a/web/src/pages/home/mods/StatusBadge/index.module.scss b/web/src/pages/home/mods/StatusBadge/index.module.scss
@@ -1,5 +1,4 @@
 .badgeStyle {
-  padding: 4px 14px;
   text-align: center;
   margin-right: 2px;
   border-radius: 50px;

diff --git a/web/src/pages/home/mods/StatusBadge/index.tsx b/web/src/pages/home/mods/StatusBadge/index.tsx
@@ -21,7 +21,13 @@ export default function StatusBadge(props: { statusConditions?: string; state?:
   const { statusConditions = APP_PHASE_STATUS.Started, state } = props;
   return (
     <div className="flex items-center">
-      <div className={clsx(styles.badgeStyle, styles[colorScheme[statusConditions]])}>
+      <div
+        className={clsx(
+          styles.badgeStyle,
+          styles[colorScheme[statusConditions]],
+          "px-2 py-1 lg:px-3",
+        )}
+      >
         <span>{statusConditions}</span>
       </div>
       {statusConditions === APP_PHASE_STATUS.Started ||