Merge pull request #12 from sandwichfarm/enhance/mob

basic mob support
sandwichfarm · Apr 15, 2024 · ab1e01e · ab1e01e
2 parents cfd5935 + 0244e33
commit ab1e01e
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 23 deletions.
diff --git a/src/lib/assets/themes/classic.css b/src/lib/assets/themes/classic.css
@@ -24,7 +24,7 @@
   }
 
   #mrp-wrapper {  
-    @apply mt-10 p-20 pt-16 max-w-screen-lg w-1/2 rounded-xl shadow-2xl dark:shadow-none 
+    @apply p-5 mt-0 md:p-20 pt-16 max-w-screen-lg rounded-xl shadow-2xl dark:shadow-none lg:w-3/4 md:w-full sm:w-full sm:my-2 md:mt-10 sm:rounded-none
   }
 
   .mrp-wrapper-bg {
@@ -74,7 +74,7 @@
   /* profile: card  */
 
   .mrp-profile-card {
-    @apply p-5 rounded-lg max-w-xs block dark:opacity-80 dark:text-black
+    @apply p-5 rounded-lg md:max-w-xs block dark:opacity-80 dark:text-black
   }
 
   .mrp-profile-card-bg {

diff --git a/src/lib/components/blocks/operator-profile/operator-profile.svelte b/src/lib/components/blocks/operator-profile/operator-profile.svelte
@@ -80,15 +80,14 @@
 
   {#if profile}
   <Block headingClass="col-span-5" {key}>
-
     <svelte:fragment slot="title">
       relay operator
     </svelte:fragment>
     <svelte:fragment slot="content">
-    <div class="grid grid-cols-5 grid-flow-col">
-      <div class="items-center col-span-2">
-        <div class="mrp-profile-card mrp-profile-card-content mrp-profile-card-bg">
-          <div class="flex items-center space-x-4">
+    <div class="w-full md:grid md:grid-cols-5 md:grid-flow-col">
+      <div class="items-center w-full md:col-span-2">
+        <div class="mrp-profile-card mrp-profile-card-content mrp-profile-card-bg sm:w-full mb-2 md:mb-0">
+          <div class="flex items-center space-x-2">
             <UserAvatar photo={owner?.photo} name={profile?.name} showTooltip={false} />
             <span class="inline-block truncate text-ellipsis overflow-hidden max-w-40">
               {#if profile?.name}
@@ -125,7 +124,7 @@
         </div>
       </div>
 
-      <div id="notes" class="col-span-3 flex flex-col justify-center"> 
+      <div id="notes" class="md:col-span-3 md:flex md:flex-col justify-center"> 
           {#if browser && relays && feedArray.length}
           <div class="feed w-full">
             {#each feedArray as note, index}  

diff --git a/src/lib/components/layout/Header.svelte b/src/lib/components/layout/Header.svelte
@@ -31,9 +31,9 @@
 
 </script>
 
-<div class="relative">
+<div class="relative my-2">
   {#if url}
-    <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
+    <h1 class="scroll-m-20 text-3xl md:text-4xl font-extrabold tracking-tight lg:text-5xl mb-6 my-2">
       <span class="flex items-center space-x-4">
         {#if $relay?.info?.icon}
           <img src={ $relay?.info.icon } class="max-w-20 max-h-20"/>
@@ -48,15 +48,15 @@
   {/if}
 
   {#if $relay?.info?.description}
-    <p class="text-xl text-muted-foreground mb-4">
+    <p class="text-lg md:text-xl text-muted-foreground mb-4">
       { $relay?.info?.description }
     </p>
   {/if}
   <LimitationsBoolean />
   <LimitationsNumber />  
   <Nips />
   <Software />
-  <div class="absolute -top-12 -right-10 flex items-center space-x-4 text-right min-w-40">
+  <div class="absolute -top-16 -right-7 sm:-right-3 sm:mb-3 flex items-center space-x-4 text-right min-w-40">
     <Login />
     <ThemeMode class="inline-block" />
   </div>

diff --git a/static/themes/classic.css b/static/themes/classic.css
@@ -533,11 +533,10 @@ video {
   background-color: rgb(0 0 0 / 0.7);
 }
 #mrp-wrapper {
-  margin-top: 2.5rem;
-  width: 50%;
+  margin-top: 0px;
   max-width: 1024px;
   border-radius: 0.75rem;
-  padding: 5rem;
+  padding: 1.25rem;
   padding-top: 4rem;
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
@@ -548,6 +547,29 @@ video {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+@media (min-width: 640px) {
+
+  #mrp-wrapper {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    width: 100%;
+    border-radius: 0px;
+  }
+}
+@media (min-width: 768px) {
+
+  #mrp-wrapper {
+    margin-top: 2.5rem;
+    width: 100%;
+    padding: 5rem;
+  }
+}
+@media (min-width: 1024px) {
+
+  #mrp-wrapper {
+    width: 75%;
+  }
+}
 .mrp-wrapper-bg {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -647,7 +669,6 @@ video {
 /* profile: card  */
 .mrp-profile-card {
   display: block;
-  max-width: 20rem;
   border-radius: var(--radius);
   padding: 1.25rem;
 }
@@ -656,6 +677,12 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
   opacity: 0.8;
 }
+@media (min-width: 768px) {
+
+  .mrp-profile-card {
+    max-width: 20rem;
+  }
+}
 .mrp-profile-card-bg {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
   --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
@@ -715,15 +742,18 @@ video {
 .-left-12 {
   left: -3rem;
 }
-.-right-10 {
-  right: -2.5rem;
-}
 .-right-12 {
   right: -3rem;
 }
+.-right-7 {
+  right: -1.75rem;
+}
 .-top-12 {
   top: -3rem;
 }
+.-top-16 {
+  top: -4rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -784,6 +814,10 @@ video {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -1162,6 +1196,11 @@ video {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1501,10 +1540,6 @@ video {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -2258,10 +2293,22 @@ video {
 }
 @media (min-width: 640px) {
 
+  .sm\:-right-3 {
+    right: -0.75rem;
+  }
+
+  .sm\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
 
+  .sm\:w-full {
+    width: 100%;
+  }
+
   .sm\:max-w-sm {
     max-width: 24rem;
   }
@@ -2310,9 +2357,51 @@ video {
 }
 @media (min-width: 768px) {
 
+  .md\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:grid {
+    display: grid;
+  }
+
   .md\:w-full {
     width: 100%;
   }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 @media (min-width: 1024px) {