Browse Source

working on training layout

Tomi Cvetic 5 năm trước cách đây
mục cha
commit
d50e02d546

+ 16 - 17
frontend/components/page.js

@@ -5,23 +5,22 @@ import Nav from './nav'
 import Footer from './footer'
 import GlobalStyle from '../styles/global'
 
-const Page = props =>
-    <>
-        <Meta />
-        <Head>
-            <title>Home</title>
-        </Head>
+const Page = props => (
+  <>
+    <Meta />
+    <Head>
+      <title>Home</title>
+    </Head>
 
-        <Header />
-        <Nav />
-        <main>
-            {props.children}
-        </main>
-        <Footer />
+    <Header />
+    <Nav />
+    <main>{props.children}</main>
+    <Footer />
 
-        <style jsx global>
-            {GlobalStyle}
-        </style>
-    </>
+    <style jsx global>
+      {GlobalStyle}
+    </style>
+  </>
+)
 
-export default Page
+export default Page

+ 5 - 0
frontend/components/search.js

@@ -116,6 +116,11 @@ class Search extends React.Component {
             button > span {
               display: none;
             }
+
+            #searchresults {
+              display: float;
+              position: absolute;
+            }
           `}
         </style>
       </>

+ 28 - 1
frontend/components/training.js

@@ -83,6 +83,7 @@ const Training = props => (
           display: grid;
           grid-template-columns: 1fr 3fr;
           padding: 5px 20px;
+          background-color: rgba(127, 127, 127, 0.5);
         }
 
         article > h2 {
@@ -94,6 +95,7 @@ const Training = props => (
         }
 
         section {
+          background: rgba(127, 0, 0, 0.5);
         }
       `}
     </style>
@@ -116,6 +118,31 @@ const Youtube = props => {
   )
 }
 
+const Spotify = props => {
+  const { link, rest } = props
+  const [crap, src] = props.link.match(/track\/(.*)/)
+  return (
+    <iframe
+      src={`https://open.spotify.com/embed/track/${src}`}
+      width='300'
+      height='80'
+      frameborder='0'
+      allowtransparency='true'
+      allow='encrypted-media'
+    />
+  )
+}
+
+const Media = props => {
+  if (props.link.includes('youtube.com')) {
+    return <Youtube {...props} />
+  } else if (props.link.includes('spotify.com')) {
+    return <Spotify {...props} />
+  } else {
+    return <p>Link not recognized.</p>
+  }
+}
+
 const Block = props => (
   <li>
     <h2>{props.title}</h2>
@@ -173,7 +200,7 @@ const Track = props => {
       <p>
         Track {props.id}: {props.title} ({props.artist})
       </p>
-      <Youtube link={props.link} />
+      <Media link={props.link} />
     </section>
   )
 }

+ 120 - 105
frontend/initial-data.js

@@ -1,111 +1,126 @@
 const data = {
-  trainings: [{
-    id: 'training0',
-    title: 'Indoor HIIT + Core',
-    type: {
-      id: 'type0',
-      name: 'HIIT',
-      description: 'High Intensity Interval Training'
-    },
-    createdAt: '2019-11-11T21:13:43.284Z',
-    trainingDate: '2019-11-12T11:45:00.000Z',
-    location: 'Yoga Room',
-    registration: [],
-    attendance: 14,
-    ratings: [],
-    published: true,
-    content: [
-      {
-        id: 'block0',
-        sequence: 0,
-        title: 'Warmup',
-        duration: 153,
-        variation: '',
-        format: {
-          id: 'format0',
-          name: 'Sequence',
-          description: 'Simple sequence of exercises'
-        },
-        tracks: [{
-          id: 0,
-          title: "Hold on, I'm coming",
-          artist: 'Sam & Dave',
-          duration: 153,
-          link: 'https://www.youtube.com/watch?v=AREppyQf5uw'
-        }],
-        exercises: [{
-          id: 'exercise0',
-          name: 'lateral jump squat',
-          description: '',
-          video: '',
-          targets: ['Glutes'],
-          baseExercise: {
-            id: 'baseExercise0',
-            name: 'squat',
-          }
-        }],
-        description: 'Warm up everything.'
+  trainings: [
+    {
+      id: 'training0',
+      title: 'Indoor HIIT + Core',
+      type: {
+        id: 'type0',
+        name: 'HIIT',
+        description: 'High Intensity Interval Training'
       },
-      {
-        id: 'block1',
-        sequence: 1,
-        title: 'Circuit',
-        duration: 720,
-        variation: '',
-        format: {
-          id: 'format1',
-          name: 'Circuit',
-          description: ''
+      createdAt: '2019-11-11T21:13:43.284Z',
+      trainingDate: '2019-11-12T11:45:00.000Z',
+      location: 'Yoga Room',
+      registration: [],
+      attendance: 14,
+      ratings: [],
+      published: true,
+      content: [
+        {
+          id: 'block0',
+          sequence: 0,
+          title: 'Warmup',
+          duration: 153,
+          variation: '',
+          format: {
+            id: 'format0',
+            name: 'Sequence',
+            description: 'Simple sequence of exercises'
+          },
+          tracks: [
+            {
+              id: 0,
+              title: "Hold on, I'm coming",
+              artist: 'Sam & Dave',
+              duration: 153,
+              link: 'https://open.spotify.com/track/6PgVDY8GTkxF3GmhVGPzoB'
+            }
+          ],
+          exercises: [
+            {
+              id: 'exercise0',
+              name: 'lateral jump squat',
+              description: '',
+              video: '',
+              targets: ['Glutes'],
+              baseExercise: {
+                id: 'baseExercise0',
+                name: 'squat'
+              }
+            }
+          ],
+          description: 'Warm up everything.'
         },
-        tracks: [{
-          id: 0,
-          artist: 'Daniel Portman',
-          title: "You're Not Alone",
-          duration: 180,
-          link: 'https://www.youtube.com/watch?v=J64jRxcygwg'
-        }, {
-          id: 1,
-          artist: 'ATFC & David Penn',
-          title: "Hipcats",
-          duration: 180,
-          link: 'https://www.youtube.com/watch?v=9seTXdfNS2Y'
-        }, {
-          id: 2,
-          artist: 'Eli Brown',
-          title: "In the Dance",
-          duration: 180,
-          link: 'https://www.youtube.com/watch?v=o2mGqfWgZ-k'
-        }, {
-          id: 3,
-          artist: 'Biscits',
-          title: "Do It Like This",
-          duration: 180,
-          link: 'https://www.youtube.com/watch?v=KwK9bUYCaIg'
-        }],
-        exercises: [{
-          id: 'exercise1',
-          name: 'boxer',
-          description: '',
-          video: '',
-          targets: ['Thighs', 'Glutes'],
-          baseExercise: {
-            id: 'baseExercise1',
-            name: 'on the spot run'
-          }
-        }, {
-          id: 'exercise2',
-          name: 'rotational drop squat',
-          description: '',
-          video: '',
-          targets: ['Thighs', 'Glutes'],
-          baseExercise: {
-            id: 'baseExercise0',
-            name: 'squat'
-          }
-        }]
-      }
-    ]
-  }
+        {
+          id: 'block1',
+          sequence: 1,
+          title: 'Circuit',
+          duration: 720,
+          variation: '',
+          format: {
+            id: 'format1',
+            name: 'Circuit',
+            description: ''
+          },
+          tracks: [
+            {
+              id: 0,
+              artist: 'Daniel Portman',
+              title: "You're Not Alone",
+              duration: 180,
+              link: 'https://open.spotify.com/track/0a4lBQU2DEP6QtisqTldkq'
+            },
+            {
+              id: 1,
+              artist: 'ATFC & David Penn',
+              title: 'Hipcats',
+              duration: 180,
+              link: 'https://open.spotify.com/track/38HvJkH21S2bRciZHohv68'
+            },
+            {
+              id: 2,
+              artist: 'Eli Brown',
+              title: 'In the Dance',
+              duration: 180,
+              link:
+                'https://open.spotify.com/track/0IHFbC9dNZzyZEWy7EZVl1?si=LKAA4MpZRy6oSOk1uZyKBg'
+            },
+            {
+              id: 3,
+              artist: 'Biscits',
+              title: 'Do It Like This',
+              duration: 180,
+              link:
+                'https://open.spotify.com/track/6JR7gYT1P4t1koPPgq4miN?si=1dJpkq5FTHaG36gXsfHeAA'
+            }
+          ],
+          exercises: [
+            {
+              id: 'exercise1',
+              name: 'boxer',
+              description: '',
+              video: '',
+              targets: ['Thighs', 'Glutes'],
+              baseExercise: {
+                id: 'baseExercise1',
+                name: 'on the spot run'
+              }
+            },
+            {
+              id: 'exercise2',
+              name: 'rotational drop squat',
+              description: '',
+              video: '',
+              targets: ['Thighs', 'Glutes'],
+              baseExercise: {
+                id: 'baseExercise0',
+                name: 'squat'
+              }
+            }
+          ]
+        }
+      ]
+    }
   ],
   polls: []
 }

+ 3 - 1
frontend/pages/index.js

@@ -29,7 +29,9 @@ const Home = () => (
     <style jsx>
       {`
         #nextTraining {
-          background: no-repeat top/100% url('media/man_working_out.jpg');
+          background-image: url('media/man_working_out.jpg');
+          background-size: auto 400px;
+          background-repeat: no-repeat;
           display: grid;
           grid-template-rows: 48px 1fr;
         }

BIN
frontend/public/media/Pexels Videos 2786540.mp4


BIN
frontend/public/media/adult-athlete-body-exercise-176782.jpg


BIN
frontend/public/media/exercise-equipment-skipping-rope-gym-sport-45056.jpg


BIN
frontend/public/media/man-doing-pushup-209969.jpg


BIN
frontend/public/media/man-in-black-tank-top-holding-brown-stretching-rope-176794.jpg


BIN
frontend/public/media/photo-of-man-jumping-on-box-1552248.jpg


BIN
frontend/public/media/photo-of-woman-doing-yoga-2294354.jpg


BIN
frontend/public/media/two-women-planking-at-the-seashore-1199607.jpg