Merge pull request #107 from platformatic/feature/responsive

Feature/responsive
platformatic · Dec 18, 2023 · 5c1e172 · 5c1e172
2 parents d883707 + 1608ba8
commit 5c1e172
Show file tree

Hide file tree

Showing 32 changed files with 283 additions and 186 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^2.0.1",
     "@fastify/error": "^3.4.1",
-    "@platformatic/ui-components": "^0.1.128",
+    "@platformatic/ui-components": "^0.1.130",
     "autoprefixer": "^10.4.16",
     "boring-name-generator": "^1.0.3",
     "electron-log": "^5.0.1",

diff --git a/src/main/index.mjs b/src/main/index.mjs
@@ -38,8 +38,8 @@ const elaborateLine = (...args) => {
 const uiLogger = {}
 function createWindow () {
   const mainWindow = new BrowserWindow({
-    minWidth: 1440,
-    minHeight: 980,
+    minWidth: 1024,
+    minHeight: 786,
     show: false,
     title: `Platformatic Meraki v${version}`,
     autoHideMenuBar: false,

diff --git a/src/renderer/src/App.css b/src/renderer/src/App.css
@@ -5,7 +5,7 @@ body {
 }
 
 #root {
-  @apply mx-auto px-[7.5rem] py-10 font-inter;
+  @apply mx-auto p-5 lg:px-[7.5rem] lg:py-10 font-inter;
   height: 100%;
   min-height: calc(100Vh - 5rem);
 }
@@ -27,6 +27,29 @@ body {
 	font-weight: 100 200 300 400 500 600 700 800 900;
 }
 
+/* width */
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 0.375rem;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.30); 
+  border-radius: 0.375rem;
+  width: 0.625rem;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.70); 
+}
+
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)

diff --git a/src/renderer/src/components/plugins/Plugin.jsx b/src/renderer/src/components/plugins/Plugin.jsx
@@ -16,7 +16,7 @@ function Plugin ({ name, onClick, isSelected }) {
       <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth} ${styles.overflowHidden}`}>
         <Icons.StackablesPluginIcon color={TERTIARY_BLUE} size={MEDIUM} />
         <p
-          className={`${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite} ${styles.ellipsis}`}
+          className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite} ${styles.ellipsis}`}
           title={name}
         >
           {name}

diff --git a/src/renderer/src/components/plugins/SelectPlugin.jsx b/src/renderer/src/components/plugins/SelectPlugin.jsx
@@ -10,8 +10,8 @@ import Title from '~/components/ui/Title'
 import useStackablesStore from '~/useStackablesStore'
 import Plugin from './Plugin'
 import { getApiPlugins } from '~/api'
-
-import { MAX_MUMBER_SELECT, NO_RESULTS_VIEW, LIST_PLUGINS_VIEW } from '~/ui-constants'
+import useWindowDimensions from '~/hooks/useWindowDimensions'
+import { MAX_WIDTH_LG, MAX_MUMBER_SELECT, MAX_MUMBER_SELECT_LG, NO_RESULTS_VIEW, LIST_PLUGINS_VIEW } from '~/ui-constants'
 import NoResults from '~/components/ui/NoResults'
 
 function SelectPlugin ({ onClick, serviceName }) {
@@ -24,11 +24,12 @@ function SelectPlugin ({ onClick, serviceName }) {
   const [filterPluginsByValue, setFilterPluginsByValue] = useState('')
   const [innerLoading, setInnerLoading] = useState(true)
   const [currentView, setCurrentView] = useState(LIST_PLUGINS_VIEW)
-
+  const { width: innerWindow } = useWindowDimensions()
   const [currentPage, setCurrentPage] = useState(1)
   const [pages, setPages] = useState([1])
   const scrollRef = useRef(null)
   const containerScrollRef = useRef(null)
+  const [maxPluginDispay, setMaxPluginDisplay] = useState(innerWindow < MAX_WIDTH_LG ? MAX_MUMBER_SELECT : MAX_MUMBER_SELECT_LG)
 
   useEffect(() => {
     async function getPlugins () {
@@ -40,6 +41,15 @@ function SelectPlugin ({ onClick, serviceName }) {
     getPlugins()
   }, [])
 
+  useEffect(() => {
+    if (innerWindow < MAX_WIDTH_LG && maxPluginDispay === MAX_MUMBER_SELECT_LG) {
+      setMaxPluginDisplay(MAX_MUMBER_SELECT)
+    }
+    if (innerWindow >= MAX_WIDTH_LG && maxPluginDispay === MAX_MUMBER_SELECT) {
+      setMaxPluginDisplay(MAX_MUMBER_SELECT_LG)
+    }
+  }, [innerWindow])
+
   useEffect(() => {
     if (serviceName && Object.keys(getService(serviceName)?.plugins).length > 0) {
       setPluginsSelected([...getService(serviceName).plugins])
@@ -52,8 +62,8 @@ function SelectPlugin ({ onClick, serviceName }) {
         setCurrentView(LIST_PLUGINS_VIEW)
       }
       const groupedPlugins = []
-      for (let i = 0; i < filteredPlugins.length; i += MAX_MUMBER_SELECT) {
-        groupedPlugins.push(filteredPlugins.slice(i, i + MAX_MUMBER_SELECT))
+      for (let i = 0; i < filteredPlugins.length; i += maxPluginDispay) {
+        groupedPlugins.push(filteredPlugins.slice(i, i + maxPluginDispay))
       }
       setGroupedPlugins(groupedPlugins)
       setPages(Array.from(new Array(groupedPlugins.length).keys()).map(x => x + 1))
@@ -63,7 +73,7 @@ function SelectPlugin ({ onClick, serviceName }) {
         setCurrentView(NO_RESULTS_VIEW)
       }
     }
-  }, [filteredPlugins.length, filterPluginsByValue])
+  }, [filteredPlugins.length, filterPluginsByValue, maxPluginDispay])
 
   function handleUsePluginsSelected () {
     setPlugins(serviceName, pluginsSelected)
@@ -168,35 +178,37 @@ function SelectPlugin ({ onClick, serviceName }) {
   }
 
   return (
-    <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
-      <div className={commonStyles.mediumFlexBlock}>
-        <Title
-          title='Select a Plugin'
-          iconName='StackablesPluginIcon'
-          dataAttrName='cy'
-          dataAttrValue='modal-title'
-        />
-        <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select one or more Plugins from our Stackables Marketplace to be added to your new serviceAdding a plugin to your service is optional.</p>
-      </div>
-      <div className={`${commonStyles.mediumFlexBlock24} ${commonStyles.fullWidth}`}>
-        <SearchBarV2 placeholder='Search for a Plugin' onClear={handleClearPlugins} onChange={handleFilterPlugins} />
-        <div className={`${commonStyles.mediumFlexBlock24} ${commonStyles.fullWidth} ${commonStyles.justifyCenter} ${styles.containerView}`}>
-          {innerLoading
-            ? <LoadingSpinnerV2
-                loading={innerLoading}
-                applySentences={{
-                  containerClassName: `${commonStyles.mediumFlexBlock} ${commonStyles.itemsCenter}`,
-                  sentences: [{
-                    style: `${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite}`,
-                    text: 'Loading plugins....'
-                  }, {
-                    style: `${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`,
-                    text: 'This process will just take a few seconds.'
-                  }]
-                }}
-                containerClassName={styles.loadingSpinner}
-              />
-            : renderCurrentView()}
+    <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth} ${styles.container}`}>
+      <div className={`${commonStyles.largeFlexBlock} ${commonStyles.fullWidth}`}>
+        <div className={commonStyles.mediumFlexBlock}>
+          <Title
+            title='Select a Plugin'
+            iconName='StackablesPluginIcon'
+            dataAttrName='cy'
+            dataAttrValue='modal-title'
+          />
+          <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select one or more Plugins from our Stackables Marketplace to be added to your new serviceAdding a plugin to your service is optional.</p>
+        </div>
+        <div className={`${commonStyles.mediumFlexBlock24} ${commonStyles.fullWidth}`}>
+          <SearchBarV2 placeholder='Search for a Plugin' onClear={handleClearPlugins} onChange={handleFilterPlugins} />
+          <div className={`${commonStyles.mediumFlexBlock24} ${commonStyles.fullWidth} ${commonStyles.justifyCenter} ${styles.containerView}`}>
+            {innerLoading
+              ? <LoadingSpinnerV2
+                  loading={innerLoading}
+                  applySentences={{
+                    containerClassName: `${commonStyles.mediumFlexBlock} ${commonStyles.itemsCenter}`,
+                    sentences: [{
+                      style: `${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite}`,
+                      text: 'Loading plugins....'
+                    }, {
+                      style: `${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`,
+                      text: 'This process will just take a few seconds.'
+                    }]
+                  }}
+                  containerClassName={styles.loadingSpinner}
+                />
+              : renderCurrentView()}
+          </div>
         </div>
       </div>
       <Button
@@ -209,7 +221,6 @@ function SelectPlugin ({ onClick, serviceName }) {
         bordered={false}
         onClick={() => handleUsePluginsSelected()}
       />
-
     </div>
   )
 }

diff --git a/src/renderer/src/components/plugins/SelectPlugin.module.css b/src/renderer/src/components/plugins/SelectPlugin.module.css
@@ -1,8 +1,11 @@
+.container {
+  @apply h-[calc(100%-33px)] lg:h-auto justify-between;
+}
 .pluginsContainer {
   @apply lg:min-h-[25.5rem] lg:max-h-[25.5rem] h-full w-full relative;
 }
 .pluginsContent{
-  @apply absolute top-0 left-0 flex flex-row gap-x-2 overflow-x-scroll w-full
+  @apply flex flex-row gap-x-2 overflow-x-auto w-full
 }
 .gridContainer {
   @apply max-w-[100%] min-w-[100%];

diff --git a/src/renderer/src/components/plugins/ViewAll.module.css b/src/renderer/src/components/plugins/ViewAll.module.css
@@ -1,3 +1,3 @@
 .pluginContainer {
-  @apply overflow-y-scroll max-h-[40vH] w-full;
+  @apply overflow-x-hidden overflow-y-auto max-h-[40vH] w-full;
 }
diff --git a/src/renderer/src/components/services/BundleFolderTree.jsx b/src/renderer/src/components/services/BundleFolderTree.jsx
@@ -19,12 +19,12 @@ const BundleFolderTree = React.forwardRef(({ _ }, ref) => {
     <div className={`${commonStyles.mediumFlexRow} ${commonStyles.itemsCenter}`} ref={ref}>
       <ArrowConnector />
       <div className={`${commonStyles.mediumFlexBlock} ${styles.serviceContainer} ${commonStyles.overflowHidden}`}>
-        <h5 className={`${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite} ${typographyStyles.ellipsis}`} title={formData.createApplication.service}>{formData.createApplication.service}</h5>
+        <h5 className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite} ${typographyStyles.ellipsis}`} title={formData.createApplication.service}>{formData.createApplication.service}</h5>
         <BorderedBox color={WHITE} borderColorOpacity={30} backgroundColor={TRANSPARENT} classes={commonStyles.fullWidth}>
           <div className={`${commonStyles.smallFlexBlock} ${commonStyles.fullWidth}`}>
             <div className={`${commonStyles.smallFlexRow} ${commonStyles.justifyCenter}`}>
               <Icons.FoldersIcon color={WHITE} size={MEDIUM} />
-              <h5 className={`${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite}`}>Services</h5>
+              <h5 className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite}`}>Services</h5>
             </div>
             {services.length > 0 && (
               <div className={`${styles.flexContainerServices}`}>

diff --git a/src/renderer/src/components/services/NameService.jsx b/src/renderer/src/components/services/NameService.jsx
@@ -11,7 +11,7 @@ function NameService ({ name, onClickEdit, onClickRemove, removeDisabled }) {
   return (
     <div className={`${commonStyles.mediumFlexRow} ${commonStyles.justifyBetween} ${commonStyles.itemsCenter} ${commonStyles.fullWidth}`}>
       <div className={`${commonStyles.overflowHidden} ${styles.flexGrow}`}>
-        <h5 className={`${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite} ${styles.ellipsis} `} title={name}>
+        <h5 className={`${typographyStyles.desktopHeadline4} ${typographyStyles.textWhite} ${styles.ellipsis} `} title={name}>
           {name}
         </h5>
       </div>

diff --git a/src/renderer/src/components/steps/ConfigureApplication.jsx b/src/renderer/src/components/steps/ConfigureApplication.jsx
@@ -85,47 +85,49 @@ const ConfigureApplication = React.forwardRef(({ onNext, onBack }, ref) => {
           />
           <p className={`${typographyStyles.desktopBodyLarge} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>Select a template and plugins for your service from our Stackables Marketplace.<br />Once you have chosen a template you can add another Service.</p>
         </div>
-        <div className={`${styles.customFlexBlock} ${commonStyles.halfWidth}`}>
-          <Forms.Field
-            title='EntryPoint'
-            helper='Select a service as entrypoint of your Application'
-            required
-            titleClassName={`${typographyStyles.desktopBodySemibold} ${typographyStyles.textWhite} `}
-            helperClassName={`${typographyStyles.desktopBodySmall} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}
-          >
-            <div className={commonStyles.smallFlexRow}>
-              {services.map(service => (
-                <Button
-                  key={service.name}
-                  type='button'
-                  label={service.name}
-                  onClick={() => setForm(form => ({ ...form, entryPoint: service.name }))}
-                  color={WHITE}
-                  backgroundColor={TRANSPARENT}
-                  classes={commonStyles.buttonPadding}
-                  selected={service.name === form.entryPoint}
-                />
-              ))}
-            </div>
-          </Forms.Field>
+        <div className={styles.customFlexBlock}>
+          <div className={styles.customFlexBlockResponsive}>
+            <Forms.Field
+              title='EntryPoint'
+              helper='Select a service as entrypoint of your Application'
+              required
+              titleClassName={`${typographyStyles.desktopBodySemibold} ${typographyStyles.textWhite} `}
+              helperClassName={`${typographyStyles.desktopBodySmall} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}
+            >
+              <div className={commonStyles.smallFlexRow}>
+                {services.map(service => (
+                  <Button
+                    key={service.name}
+                    type='button'
+                    label={service.name}
+                    onClick={() => setForm(form => ({ ...form, entryPoint: service.name }))}
+                    color={WHITE}
+                    backgroundColor={TRANSPARENT}
+                    classes={commonStyles.buttonPadding}
+                    selected={service.name === form.entryPoint}
+                  />
+                ))}
+              </div>
+            </Forms.Field>
 
-          <Forms.Field
-            title='Port Number'
-            titleClassName={`${typographyStyles.desktopBodySemibold} ${typographyStyles.textWhite} `}
-            required
-          >
-            <Forms.Input
-              placeholder='Enter port number'
-              name='port'
-              borderColor={WHITE}
-              value={form.port}
-              onChange={handleChange}
-              errorMessage={validations.formErrors.port}
-              backgroundTransparent
-              inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
-              verticalPaddingClassName={commonStyles.noVerticalPadding}
-            />
-          </Forms.Field>
+            <Forms.Field
+              title='Port Number'
+              titleClassName={`${typographyStyles.desktopBodySemibold} ${typographyStyles.textWhite} `}
+              required
+            >
+              <Forms.Input
+                placeholder='Enter port number'
+                name='port'
+                borderColor={WHITE}
+                value={form.port}
+                onChange={handleChange}
+                errorMessage={validations.formErrors.port}
+                backgroundTransparent
+                inputTextClassName={`${typographyStyles.desktopBody} ${typographyStyles.textWhite}`}
+                verticalPaddingClassName={commonStyles.noVerticalPadding}
+              />
+            </Forms.Field>
+          </div>
 
           <Forms.Field
             title='Log Level'

diff --git a/src/renderer/src/components/steps/ConfigureApplication.module.css b/src/renderer/src/components/steps/ConfigureApplication.module.css
@@ -5,5 +5,8 @@
   @apply flex justify-between;
 }
 .customFlexBlock {
-  @apply flex flex-col gap-y-8
+  @apply flex flex-col gap-y-8 w-full lg:w-1/2
+}
+.customFlexBlockResponsive {
+  @apply flex flex-row lg:flex-col gap-8 w-full lg:w-1/2
 }
diff --git a/src/renderer/src/components/steps/ConfigureServices.module copy.css b/src/renderer/src/components/steps/ConfigureServices.module copy.css
@@ -1,5 +1,5 @@
 .container {
-  @apply flex flex-col min-h-[80vH] overflow-y-scroll justify-between
+  @apply flex flex-col min-h-[80vH] overflow-x-hidden overflow-x-hidden overflow-y-auto justify-between
 }
 .buttonContainer {
   @apply flex justify-end;

diff --git a/src/renderer/src/components/steps/CreateApplication.module.css b/src/renderer/src/components/steps/CreateApplication.module.css
@@ -1,11 +1,12 @@
 .container {
-  @apply flex flex-col justify-between h-[80vH] relative;
+  @apply flex flex-col justify-between h-[80vH] relative overflow-hidden;
 }
 .buttonContainer {
   @apply flex justify-end;
 }
 .imageContainer{
-  @apply absolute bottom-[-3rem] right-[-4rem] w-1/2 h-screen z-[-1];
+  @apply absolute bottom-[-3rem] right-[-4rem] w-1/2 z-[-1];
+  height: calc(100vH - 5rem);
   background: url('~/assets/Illustration_Stackables.svg') no-repeat bottom right;
   background-size: 100%;
 }