From 8afae8ea960b7162df851ad5946f4bbebd729ff3 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Sun, 29 Dec 2019 22:34:01 +0100
Subject: Basic template

---
 components/GoogleDriveLink.stories.js | 19 +++++++++++
 components/GoogleDriveLink.vue        | 60 +++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 components/GoogleDriveLink.stories.js
 create mode 100644 components/GoogleDriveLink.vue

(limited to 'components')

diff --git a/components/GoogleDriveLink.stories.js b/components/GoogleDriveLink.stories.js
new file mode 100644
index 0000000..37d67e8
--- /dev/null
+++ b/components/GoogleDriveLink.stories.js
@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/vue'
+import { center } from '../.storybook/decorators'
+
+import GoogleDriveLink from './GoogleDriveLink'
+
+const googleDriveLink = {
+  text: 'Test',
+  link: 'https://drive.google.com/u/1'
+}
+
+storiesOf('GoogleDriveLink', module)
+  .addDecorator(center)
+  .add('default', () => {
+    return {
+      components: { GoogleDriveLink },
+      template: `<google-drive-link :text="text" :link="link" />`,
+      data: () => googleDriveLink
+    }
+  })
diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
new file mode 100644
index 0000000..729c03d
--- /dev/null
+++ b/components/GoogleDriveLink.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="google-drive-link">
+    <div class="image">
+      <img src="/assets/google-drive.png" alt="Drive" />
+    </div>
+    <p>
+      {{ text }}
+    </p>
+    <a :href="link">
+      <plain-button text="Przejdź" />
+    </a>
+  </div>
+</template>
+
+<script>
+import PlainButton from './Buttons/PlainButton'
+
+export default {
+  name: 'GoogleDriveLink',
+  components: { PlainButton },
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    link: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.google-drive-link {
+  background: white;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 200px;
+}
+
+.google-drive-link img {
+  display: block;
+  margin: auto;
+}
+
+.google-drive-link .image {
+  background: #f3f3f3;
+  border-radius: 50px;
+  padding: 20px;
+  margin: 20%;
+}
+</style>
-- 
cgit 1.4.1


From 43d71a71cce9354f1d7a6ca84e3b583b9fbf5001 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 30 Dec 2019 19:11:52 +0100
Subject: Add to page

---
 components/GoogleDriveLink.vue | 65 ++++++++++++++++++++++++++++++++++++------
 pages/kronika/index.vue        | 11 +++++--
 2 files changed, 66 insertions(+), 10 deletions(-)

(limited to 'components')

diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index 729c03d..96e3fbb 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -3,9 +3,11 @@
     <div class="image">
       <img src="/assets/google-drive.png" alt="Drive" />
     </div>
-    <p>
-      {{ text }}
-    </p>
+    <div class="text">
+      <p>
+        {{ text }}
+      </p>
+    </div>
     <a :href="link">
       <plain-button text="Przejdź" />
     </a>
@@ -31,30 +33,77 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped>
 .google-drive-link {
   background: white;
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
 
   padding: 20px;
+  margin: 10px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  min-width: 200px;
+  min-width: 400px;
+}
+
+.google-drive-link .text {
+  margin: 30px 0;
+}
+
+.google-drive-link button,
+.google-drive-link a {
+  width: 100%;
+  display: block;
+  margin: auto;
+  text-decoration: none;
+  max-width: 300px;
 }
 
 .google-drive-link img {
   display: block;
   margin: auto;
+  width: 40px;
 }
 
 .google-drive-link .image {
   background: #f3f3f3;
   border-radius: 50px;
-  padding: 20px;
-  margin: 20%;
+  padding: 15px;
+  margin: 0 20%;
+}
+
+@media (min-width: 480px) {
+  .google-drive-link {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .google-drive-link .text {
+    margin: 0 10px;
+    flex: 1;
+    text-align: left;
+  }
+
+  .google-drive-link .image {
+    margin: 0;
+    margin-right: 10px;
+    padding: 10px;
+  }
+
+  .google-drive-link img {
+    width: 30px;
+  }
+
+  .google-drive-link a,
+  .google-drive-link button {
+    margin-right: 0;
+  }
+
+  .google-drive-link a {
+    width: 20%;
+  }
 }
-</style>
+</style>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 8142a6c..dab61ba 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -1,17 +1,24 @@
 <template>
-  <div style="padding-top: 20px">
+  <div style="padding-top: 20px; max-width: 900px">
     <h2>Ostatnie wpisy</h2>
     <post-list :posts="posts" />
+    <google-drive-link
+      text="Zobacz również e-książkę rozkazów"
+      link="https://drive.google.com/drive/folders/1LWH4yYXpaa8kapBa2UAZTKnAAgXOHQYo?usp=sharing"
+      style="margin: 60px 10px"
+    />
   </div>
 </template>
 
 <script>
 import PostList from '~/components/Posts/PostList'
 import postListParentMixin from '~/components/Posts/PostList/parentMixin'
+import GoogleDriveLink from '~/components/GoogleDriveLink'
 
 export default {
   components: {
-    PostList
+    PostList,
+    GoogleDriveLink
   },
   mixins: [postListParentMixin]
 }
-- 
cgit 1.4.1


From 39df4184fb4dc2d5117592b4025dea94433361f0 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Mon, 30 Dec 2019 19:33:03 +0100
Subject: Fix break on hyphen

---
 components/GoogleDriveLink.vue | 15 ++++++++-------
 pages/kronika/index.vue        |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'components')

diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index 96e3fbb..dc21d9e 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -4,9 +4,7 @@
       <img src="/assets/google-drive.png" alt="Drive" />
     </div>
     <div class="text">
-      <p>
-        {{ text }}
-      </p>
+      <p v-html="text"></p>
     </div>
     <a :href="link">
       <plain-button text="Przejdź" />
@@ -45,8 +43,6 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
-  min-width: 400px;
 }
 
 .google-drive-link .text {
@@ -75,10 +71,9 @@ export default {
   margin: 0 20%;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 530px) {
   .google-drive-link {
     flex-direction: row;
-    width: 100%;
   }
 
   .google-drive-link .text {
@@ -106,4 +101,10 @@ export default {
     width: 20%;
   }
 }
+
+@media (min-width: 960px) {
+  .google-drive-link {
+    width: 100%;
+  }
+}
 </style>
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index dab61ba..61d89e2 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -3,7 +3,7 @@
     <h2>Ostatnie wpisy</h2>
     <post-list :posts="posts" />
     <google-drive-link
-      text="Zobacz również e-książkę rozkazów"
+      text="Zobacz również e&#8209;książkę rozkazów"
       link="https://drive.google.com/drive/folders/1LWH4yYXpaa8kapBa2UAZTKnAAgXOHQYo?usp=sharing"
       style="margin: 60px 10px"
     />
-- 
cgit 1.4.1


From 34e044ef96efc8f4e6463bdc767c526f590e505c Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Thu, 2 Jan 2020 13:07:53 +0100
Subject: Increase gdrive link margin

---
 components/GoogleDriveLink.vue | 2 ++
 pages/kronika/index.vue        | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'components')

diff --git a/components/GoogleDriveLink.vue b/components/GoogleDriveLink.vue
index dc21d9e..c54c630 100644
--- a/components/GoogleDriveLink.vue
+++ b/components/GoogleDriveLink.vue
@@ -47,6 +47,7 @@ export default {
 
 .google-drive-link .text {
   margin: 30px 0;
+  font-size: 18px;
 }
 
 .google-drive-link button,
@@ -80,6 +81,7 @@ export default {
     margin: 0 10px;
     flex: 1;
     text-align: left;
+    font-size: 16px;
   }
 
   .google-drive-link .image {
diff --git a/pages/kronika/index.vue b/pages/kronika/index.vue
index 61d89e2..4da7e58 100644
--- a/pages/kronika/index.vue
+++ b/pages/kronika/index.vue
@@ -5,7 +5,7 @@
     <google-drive-link
       text="Zobacz również e&#8209;książkę rozkazów"
       link="https://drive.google.com/drive/folders/1LWH4yYXpaa8kapBa2UAZTKnAAgXOHQYo?usp=sharing"
-      style="margin: 60px 10px"
+      style="margin: 60px 30px"
     />
   </div>
 </template>
-- 
cgit 1.4.1