Merge pull request #480 from dwh-outsite/responsiveness-improv

Improve responsiveness for mid-sized screens

components/BaseHeader.vue

@@ -7,7 +7,7 @@
         </nuxt-link>
         <div
           v-show="showMenu"
-          class="md:hidden absolute z-60 top-16 text-white backdrop-blur-xl bg-white bg-opacity-10 w-full -ml-4 px-1 py-2 space-y-1 text-lg font-semibold transition-all"
+          class="lg:hidden absolute z-60 top-16 text-white backdrop-blur-xl bg-white bg-opacity-10 w-full -ml-4 p-2 space-y-1 text-lg font-semibold rounded-md transition-all"
         >
           <nuxt-link
             v-for="item in menuItems"
@@ -20,7 +20,7 @@
           <slot name="mobile-menu-extension"></slot>
         </div>
         <div
-          class="hidden md:flex p-1 rounded-full text-lg font-semibold text-white backdrop-blur-lg bg-white bg-opacity-10 shadow"
+          class="hidden lg:flex p-1 rounded-full text-lg font-semibold text-white backdrop-blur-lg bg-white bg-opacity-10 shadow"
         >
           <nuxt-link
             v-for="item in menuItems"
@@ -45,7 +45,7 @@
             </div>
           </div>
           <slot name="menu-extension"></slot>
-          <div class="md:hidden p-2 rounded-full backdrop-blur-lg bg-white bg-opacity-10 hover:bg-opacity-25 shadow">
+          <div class="lg:hidden p-2 rounded-full backdrop-blur-lg bg-white bg-opacity-10 hover:bg-opacity-25 shadow">
             <div
               class="rounded-full w-7 h-7 p-1 bg-white border-2 border-white flex items-center justify-center overflow-hidden relative"
               @click="showMenu = !showMenu"

components/FileCards.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-wrap justify-center">
-    <div v-for="file in files" :key="file.id" class="w-1/2 md:w-1/2 xl:w-1/5 p-2 md:p-3">
+  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-2 md:gap-3">
+    <div v-for="file in files" :key="file.id">
       <a :href="file.webViewLink" target="_blank">
         <div class="group shadow-lg rounded-lg overflow-hidden bg-white hover:bg-brand-100 hover:text-brand-500">
           <div>

components/Testimonial.vue

@@ -41,7 +41,7 @@ nl:
     </div>
 
     <div
-      class="hidden md:block mx-auto rounded-full bg-white shadow-lg relative overflow-hidden w-2/3 bg-hero-falling-triangles"
+      class="hidden md:block mx-auto rounded-full bg-white shadow-lg relative overflow-hidden w-5/6 xl:w-2/3 bg-hero-falling-triangles"
     >
       <div v-for="(testimonial, index) in testimonials" :key="index">
         <transition name="slide-right">

sites/dwhdelft.nl/components/Header.vue

@@ -5,14 +5,12 @@ en:
       url: index
     - title: Bar Buddy
       url: barbuddy
-    - title: Reservations
-      url: book
-    - title: EatingOUT
-      url: index#eatingout
     - title: Education
       url: /education
     - title: Jong&Out
       url: /jongenout
+    - title: EatingOUT
+      url: index#eatingout
     - title: Andersblad
       url: andersblad
     - title: Contact
@@ -23,14 +21,12 @@ nl:
       url: index
     - title: Barbuddy
       url: barbuddy
-    - title: Reserveren
-      url: book
-    - title: EatingOUT
-      url: index#eatingout
     - title: Voorlichting
       url: /education
     - title: Jong&Out
       url: /jongenout
+    - title: EatingOUT
+      url: index#eatingout
     - title: Andersblad
       url: andersblad
     - title: Contact

sites/dwhdelft.nl/components/JoinOptions.vue

@@ -39,8 +39,8 @@ nl:
 
 <template>
   <div class="container px-4 mx-auto pt-8 md:pt-0 pb-12 md:pb-8">
-    <div class="md:flex justify-center">
-      <div class="flex-1 mx-2 flex items-end mt-4">
+    <div class="md:flex justify-center items-start">
+      <div class="flex-1 mx-2 flex items-end pt-4 md:pt-12">
         <div class="text-white">
           <h1 class="font-medium leading-none text-5xl mb-4" v-html="$t('title')"></h1>
           <p class="text-lg lg:pr-20 mb-4" v-html="$t('description')" />

sites/dwhdelft.nl/pages/contact.vue

@@ -24,7 +24,7 @@ nl:
       <div class="md:w-1/3 md:border-l md:pl-6 md:ml-6">
         <ContactOptions email="bestuur@dwhdelft.nl" :dark="true" />
         <a href="https://my.dwhdelft.nl">
-          <Announcement class="md:w-2/3">
+          <Announcement class="xl:w-2/3">
             {{ $t('my') }}
             <span class="text-xl font-bold block">my.dwhdelft.nl</span>
           </Announcement>
@@ -74,7 +74,7 @@ nl:
     <SkewedSection content-class="bg-purple-800" triangle-class="border-purple-800" :connect="true" :bottom="false">
       <div class="container mx-auto px-4 pt-12 pb-4 md:pb-12">
         <h1 class="text-white font-medium text-5xl mb-12" v-html="$t('titles.board')" />
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
           <div
             v-for="member in boardMembers"
             :key="member.name"

sites/outsite.nl/components/BulletPoints.vue

@@ -38,17 +38,13 @@ nl:
 
 <template>
   <div class="container mx-auto px-4">
-    <div class="md:flex -mx-3">
-      <div
-        v-for="point in $t('bulletPoints')"
-        :key="point.title"
-        class="flex-1 rounded-md bg-white mx-3 mb-4 shadow-lg"
-      >
-        <div class="">
+    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-3">
+      <div v-for="point in $t('bulletPoints')" :key="point.title" class="rounded-md bg-white shadow-lg">
+        <div>
           <div class="w-full h-40 rounded-t overflow-hidden mx-auto">
             <img
               :src="require(`#/assets/images/photos/bullets/bullet_${point.image}.png`)"
-              class="object-cover w-full"
+              class="object-cover w-full h-full"
             />
           </div>
         </div>

sites/outsite.nl/components/Footer.vue

@@ -47,7 +47,7 @@ nl:
   <div>
     <div class="container px-4 mx-auto text-white">
       <div class="md:flex">
-        <div class="md:w-2/3 md:border-r border-gray-600 pt-8">
+        <div class="md:w-2/3 md:border-r border-gray-600 py-8">
           <h3 class="text-xl font-bold mb-4 uppercase tracking-wider" v-text="$t('boardTitle')" />
 
           <div class="md:flex flex-wrap">

sites/outsite.nl/components/Header.vue

@@ -3,32 +3,28 @@ en:
   menu:
     - title: Home
       url: index
-    - title: Join Outsite
+    - title: Join
       url: index#join-outsite
-    - title: Reservations
-      url: book
-    - title: EatingOUT
-      url: index#eatingout
     - title: Committees
       url: /committees
     - title: Testimonials
       url: testimonials
+    - title: EatingOUT
+      url: index#eatingout
     - title: Contact
       url: '#contact'
 nl:
   menu:
     - title: Home
       url: index
-    - title: Join Outsite
+    - title: Join
       url: index#join-outsite
-    - title: Reserveren
-      url: book
-    - title: EatingOUT
-      url: index#eatingout
     - title: Commissies
       url: committees
     - title: Ervaringen
       url: testimonials
+    - title: EatingOUT
+      url: index#eatingout
     - title: Contact
       url: '#contact'
 </i18n>

sites/outsite.nl/components/Highlights.vue

@@ -30,8 +30,11 @@ nl:
         :class="[index % 2 == 0 ? '' : 'flex-row-reverse', excerpts ? 'mb-10' : 'mb-16']"
         class="bg-white md:flex rounded-lg overflow-hidden shadow-xl"
       >
-        <div class="h-64 md:w-1/3 overflow-hidden">
-          <img :src="require(`#/assets/images/photos/highlights/${highlight.image}.jpg`)" class="object-cover w-full" />
+        <div class="xl:h-64 md:w-1/3 overflow-hidden">
+          <img
+            :src="require(`#/assets/images/photos/highlights/${highlight.image}.jpg`)"
+            class="object-cover w-full h-full"
+          />
         </div>
         <div class="flex-1 p-8 flex flex-col justify-between">
           <div>

sites/outsite.nl/components/JoinOptions.vue

@@ -86,7 +86,7 @@ nl:
         description: Iedere donderdag komen we samen voor een gezellige
           borrel of leuke activiteit.
       - icon: tablet
-        title: Gezellige WhatsAppgroepen
+        title: Gezellige Appgroepen
         description: We hebben leuke WhatsAppgroepen waar je gezellig kan
           chatten.
       - icon: travel-walk
@@ -112,19 +112,19 @@ nl:
     <div class="text-center">
       <h1 class="text-white font-medium text-5xl" v-html="$t('title')"></h1>
     </div>
-    <div class="md:flex justify-center mt-4">
-      <div class="flex-1 mb-8 md:mb-0 md:mr-2 fade-corners rounded-lg text-white">
+    <div class="lg:flex justify-center mt-4">
+      <div class="flex-1 mb-8 lg:mb-0 lg:mr-2 fade-corners rounded-lg text-white">
         <div class="bg-brand-400 rounded-t-lg pb-6 pt-8 px-8">
-          <div class="md:flex items-center mb-6">
-            <div class="rounded-full w-16 h-16 p-5 bg-white mr-4 text-brand-400 mb-6 md:mb-0">
+          <div class="lg:flex items-center mb-6">
+            <div class="rounded-full w-16 h-16 p-5 bg-white mr-4 text-brand-400 mb-6 lg:mb-0">
               <Zondicon icon="compose" class="fill-current" />
             </div>
             <h2 class="text-xl font-bold uppercase tracking-wider">
               {{ $t('membership.title') }}
             </h2>
           </div>
 
-          <p class="text-lg md:text-xl text-white font-semibold mb-6">
+          <p class="text-lg lg:text-xl text-white font-semibold mb-6">
             {{ $t('membership.description') }}
           </p>
 
@@ -138,7 +138,7 @@ nl:
           </a>
         </div>
         <div class="flex flex-wrap -mx-2 pt-6 px-8">
-          <div v-for="advantage in $t('membership.advantages')" :key="advantage.title" class="mb-4 md:w-1/2">
+          <div v-for="advantage in $t('membership.advantages')" :key="advantage.title" class="mb-4 w-full lg:w-1/2">
             <div class="h-full bg-white rounded-lg p-3 pr-4 items-center text-gray-900 mx-2 leading-snug shadow-md">
               <div class="flex items-center mb-1">
                 <div class="rounded-full w-8 h-8 p-2 bg-brand-400 mr-3 text-white">
@@ -150,24 +150,24 @@ nl:
               </div>
               <div class="flex">
                 <div class="pl-8 mr-3" />
-                <p class="text-sm md:text-base leading-tight" v-text="advantage.description" />
+                <p class="text-sm lg:text-base leading-tight" v-text="advantage.description" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="flex-1 md:ml-2">
+      <div class="flex-1 lg:ml-2">
         <div class="bg-white rounded-lg shadow p-8 flex-1 flex flex-col justify-between">
           <div class="flex-1">
-            <div class="md:flex items-center mb-6">
-              <div class="rounded-full w-16 h-16 p-4 bg-brand-400 mr-4 text-white mb-6 md:mb-0">
+            <div class="lg:flex items-center mb-6">
+              <div class="rounded-full w-16 h-16 p-4 bg-brand-400 mr-4 text-white mb-6 lg:mb-0">
                 <Zondicon icon="user-group" class="fill-current" />
               </div>
               <h2 class="text-xl font-bold text-brand-400 uppercase tracking-wider">
                 {{ $t('kmg.title') }}
               </h2>
             </div>
-            <p class="mb-6 text-lg md:text-xl">
+            <p class="mb-6 text-lg lg:text-xl">
               {{ $t('kmg.description') }}
             </p>
           </div>
@@ -179,17 +179,17 @@ nl:
             </a>
           </div>
         </div>
-        <div class="bg-white rounded-lg shadow p-8 flex-1 flex flex-col justify-between mt-6 md:mt-4">
+        <div class="bg-white rounded-lg shadow p-8 flex-1 flex flex-col justify-between mt-6 lg:mt-4">
           <div class="flex-1">
-            <div class="md:flex items-center mb-6">
-              <div class="rounded-full w-16 h-16 p-5 bg-brand-400 mr-4 text-white mb-6 md:mb-0">
+            <div class="lg:flex items-center mb-6">
+              <div class="rounded-full w-16 h-16 p-5 bg-brand-400 mr-4 text-white mb-6 lg:mb-0">
                 <Zondicon icon="beverage" class="fill-current" />
               </div>
               <h2 class="text-xl font-bold text-brand-400 uppercase tracking-wider">
                 {{ $t('bar_buddy.title') }}
               </h2>
             </div>
-            <p class="mb-6 text-lg md:text-xl">
+            <p class="mb-6 text-lg lg:text-xl">
               {{ $t('bar_buddy.description') }}
             </p>
           </div>

sites/outsite.nl/components/JoinWhatsapp.vue

@@ -11,13 +11,13 @@ nl:
 
 <template>
   <div class="mx-auto container relative">
-    <div class="xl:h-28 xl:absolute z-50 -top-14 p-4 w-full text-center">
+    <div class="lg:h-28 lg:absolute z-50 -top-14 p-4 w-full text-center">
       <form
-        class="bg-white rounded-lg xl:rounded-full shadow-xl overflow-hidden h-full xl:inline-flex justify-between items-center xl:w-5/6"
+        class="bg-white rounded-lg lg:rounded-full shadow-xl overflow-hidden h-full lg:inline-flex justify-between items-center w-full xl:w-5/6"
         @submit="submitForm"
       >
         <div class="text-2xl py-4 px-8 flex-1 flex items-center">
-          <WhatsAppLogo class="fill-current text-green-400 h-32 md:h-20 xl:h-12 mr-4" />
+          <WhatsAppLogo class="fill-current text-green-400 h-32 md:h-20 lg:h-12 mr-4" />
 
           <div v-if="state == 'cta'" v-html="$t('description')" />
 
@@ -71,7 +71,7 @@ nl:
         <button
           v-if="state == 'cta'"
           type="button"
-          class="bg-green-400 h-full px-8 text-white text-xl font-bold tracking-wider uppercase flex items-center justify-center py-2 rounded-b xl:rounded-b-none xl:rounded-r w-full xl:w-auto"
+          class="bg-green-400 h-full px-8 text-white text-xl font-bold tracking-wider uppercase flex items-center justify-center py-2 rounded-b lg:rounded-b-none lg:rounded-r w-full lg:w-auto"
           @click="state = 'form'"
         >
           <div>{{ $t('button') }}</div>
@@ -80,7 +80,7 @@ nl:
           v-if="state == 'form'"
           :disabled="formStatus === 'loading'"
           type="submit"
-          class="bg-green-400 h-full px-8 text-white text-xl font-bold tracking-wider uppercase flex items-center justify-center py-2 rounded-b xl:rounded-b-none xl:rounded-r w-full xl:w-auto disabled:bg-green-300"
+          class="bg-green-400 h-full px-8 text-white text-xl font-bold tracking-wider uppercase flex items-center justify-center py-2 rounded-b lg:rounded-b-none lg:rounded-r w-full lg:w-auto disabled:bg-green-300"
         >
           {{ formStatus === 'loading' ? $t('forms.buttons.loading') : $t('forms.buttons.sign_up') }}
           <Zondicon icon="arrow-thin-right" class="w-4 ml-2 fill-current" />