68395bc Refactor responsive and fix mobile toggle nav — radicle-explorer

modified public/index.css

@@ -353,6 +353,22 @@ label.input {

 	align-items: center;
 }
 .mobile {
   display: none !important;
 }
 .desktop {
   display: block !important;
 }
 @media (max-width: 720px) {
   .mobile {
     display: block !important;
   }
   .desktop {
     display: none !important;
   }
 }
 span.small, .text-xsmall {
 	font-size: 0.75rem;
 }

modified src/Form.svelte

@@ -146,20 +146,7 @@

   .actions.editable {
     visibility: visible;
   }
   .mobile {
     display: none !important;
   }
   .desktop {
     display: block !important;
   }
   @media (max-width: 720px) {
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }
     .field {
       width: unset;
     }

modified src/Header.svelte

@@ -114,17 +114,10 @@

     margin-left: 2rem;
     white-space: nowrap;
   }
   div.toggle {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 10px;
     height: 42px;
     width: 42px;
     z-index: 2;
     cursor: pointer;
     display: none;
   }
   @media(max-width: 800px) {
     .balance {
       display: none;

@@ -134,6 +127,16 @@

     .network, .search, header .nav, .balance {
       display: none;
     }
     div.toggle {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-left: 10px;
       height: 42px;
       width: 42px;
       z-index: 2;
       cursor: pointer;
     }
   }
 </style>

@@ -201,7 +204,7 @@

         <Connect className="small" {config} />
       </span>
     {/if}
     <div class="ellipsis toggle mobile" on:click={toggleNavbar}>
     <div class="toggle" on:click={toggleNavbar}>
       <Icon name="ellipsis" width={27} height={27} />
     </div>
   </div>

modified src/base/orgs/View.svelte

@@ -153,16 +153,11 @@

     display: flex;
     align-items: center;
     margin-right: 2rem;
     margin-bottom: 1rem;
   }
   .members .member:last-child {
     margin-right: 0;
   }
   .mobile {
     display: none !important;
   }
   .desktop {
     display: block !important;
   }
   .members .member-icon {
     width: 2rem;
     height: 2rem;

@@ -179,12 +174,6 @@

     .members .member {
       margin-right: 1rem;
     }
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }
   }
 </style>

modified src/base/orgs/View/Projects.svelte

@@ -28,7 +28,7 @@

 <style>
   .projects {
     margin-top: 2rem;
     margin-top: 1rem;
   }
   .projects .project {
     margin-bottom: 1rem;

modified src/base/projects/Browser.svelte

@@ -275,12 +275,6 @@

     font-size: 1.5rem;
     margin-bottom: 1rem;
   }
   .desktop {
     display: default;
   }
   .mobile {
     display: none !important;
   }
   nav {
     padding: 0 2rem;
   }

@@ -299,12 +293,6 @@

       width: 100%;
       border-color: var(--color-secondary-faded);
     }
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }
     .column-right {
       padding: 1rem 0;
       min-width: 0;

modified src/base/projects/Widget.svelte

@@ -113,22 +113,10 @@

     height: 1.25rem;
     font-size: 0.5rem;
   }
   .mobile {
     display: none !important;
   }
   .desktop {
     display: block !important;
   }
   @media (max-width: 720px) {
     article {
       min-width: 0;
     }
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }
   }
 </style>

modified src/base/users/View.svelte

@@ -78,7 +78,7 @@

     margin-right: 1rem;
   }
   .projects {
     margin-top: 2rem;
     margin-top: 1rem;
   }
   .projects .project {
     margin-bottom: 1rem;

@@ -87,11 +87,13 @@

     margin-top: 2rem;
     align-items: center;
     display: flex;
     flex-wrap: wrap;
   }
   .members .member {
     display: flex;
     align-items: center;
     margin-right: 2rem;
     margin-bottom: 1rem;
   }
   .members .member:last-child {
     margin-right: 0;

@@ -101,12 +103,6 @@

     height: 2rem;
     margin-right: 1rem;
   }
   .mobile {
     display: none !important;
   }
   .desktop {
     display: block !important;
   }
   @media (max-width: 720px) {
     .fields {
       grid-template-columns: 5rem auto;

@@ -119,12 +115,6 @@

     .members .member {
       margin-right: 1rem;
     }
     .mobile {
       display: block !important;
     }
     .desktop {
       display: none !important;
     }
   }
 </style>

@@ -211,11 +201,7 @@

                   <div class="member-icon">
                     <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
                   </div>
                   <div class="desktop">
                     <Address address={profile.address}
                       resolve noBadge noAvatar {profile} {config} />
                   </div>
                   <div class="mobile">
                   <div>
                     <Address address={profile.address} compact
                       resolve noBadge noAvatar {profile} {config} />
                   </div>

modified vite.config.ts

@@ -7,7 +7,6 @@ const config: UserConfig = {

   optimizeDeps: {
     exclude: ['svelte-routing', '@pedrouid/environment', '@pedrouid/iso-crypto']
   },
   base: "",
   plugins: [svelte(), rewriteAll()],
   resolve: {
     alias: {