Merge pull request #17 from drzzle-app/blogDropletV2

Blog droplet v2
drzzle-app · Sep 6, 2020 · b28b05b · b28b05b
2 parents 909b669 + a88c934
commit b28b05b
Show file tree

Hide file tree

Showing 23 changed files with 639 additions and 63 deletions.
diff --git a/src/droplets/blog-feed/index.js b/src/droplets/blog-feed/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+
+const template = require('./template.html');
+
+export default Vue.component('blog-feed-droplet', {
+  template,
+  name: 'blog-feed-droplet',
+});
diff --git a/src/droplets/blog-feed/template.html b/src/droplets/blog-feed/template.html
@@ -0,0 +1,43 @@
+<div class="drzBlog-feed">
+  <div class="drzBlog-feed-grid">
+    <a href="#" class="drzBlog-feed-card">
+      <div class="drzBlog-feed-cardImg" style="background-image:url('https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg');"></div>
+      <div class="drzBlog-feed-cardText">
+        <strong class="drzBlog-feed-title">Blog Title</strong>
+        <span class="drzBlog-feed-date">12/12/21</span>
+        <p class="drzBlog-feed-preview">
+          Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony
+          typewriter tousled williamsburg lyft fanny pack tumblr post-ironic stumptown
+          gastropub. Freegan jean shorts shaman forage chillwave, green juice +1 next level
+          authentic tote bag sold...
+        </p>
+      </div>
+    </a>
+    <a href="#" class="drzBlog-feed-card">
+      <div class="drzBlog-feed-cardImg" style="background-image:url('https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg');"></div>
+      <div class="drzBlog-feed-cardText">
+        <strong class="drzBlog-feed-title">Blog Title</strong>
+        <span class="drzBlog-feed-date">12/12/21</span>
+        <p class="drzBlog-feed-preview">
+          Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony
+          typewriter tousled williamsburg lyft fanny pack tumblr post-ironic stumptown
+          gastropub. Freegan jean shorts shaman forage chillwave, green juice +1 next level
+          authentic tote bag sold...
+        </p>
+      </div>
+    </a>
+    <a href="#" class="drzBlog-feed-card">
+      <div class="drzBlog-feed-cardImg" style="background-image:url('https://cdn.drzzle.app/mock-images/default-images/mock-blog.svg');"></div>
+      <div class="drzBlog-feed-cardText">
+        <strong class="drzBlog-feed-title">Blog Title</strong>
+        <span class="drzBlog-feed-date">12/12/21</span>
+        <p class="drzBlog-feed-preview">
+          Truffaut thundercats forage actually. Semiotics green juice DIY air plant irony
+          typewriter tousled williamsburg lyft fanny pack tumblr post-ironic stumptown
+          gastropub. Freegan jean shorts shaman forage chillwave, green juice +1 next level
+          authentic tote bag sold...
+        </p>
+      </div>
+    </a>
+  </div>
+</div>
diff --git a/src/droplets/blog-feed/themes/default/styles.less b/src/droplets/blog-feed/themes/default/styles.less
@@ -0,0 +1,98 @@
+.drzBlog-feed {
+  display: grid;
+}
+
+.drzBlog-feed-grid {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto;
+
+  @media @mobile {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+
+.drzBlog-feed-2 {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto;
+
+  @media @mobile {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+
+.drzBlog-feed-4 {
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: auto;
+
+  @media @mobile {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+
+.drzBlog-feed-5 {
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto;
+
+  @media @mobile {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+}
+
+.drzBlog-feed-card {
+  .box-shadow;
+  border-color: transparent;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.drzBlog-feed-cardImg {
+  background-color: #cccccc;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 200px;
+}
+
+.drzBlog-feed-cardImg {
+  width: 100%;
+}
+
+.drzBlog-feed-cardText {
+  background-color: @white;
+  height: 100%;
+  padding: 20px;
+}
+
+.drzBlog-feed-title {
+  color: fade(@black, 60%);
+  font-size: 14pt;
+  font-weight: 600;
+}
+
+.drzBlog-feed-date {
+  color: fade(@black, 40%);
+  display: block;
+  font-size: 10pt;
+  font-weight: 300;
+}
+
+.drzBlog-feed-preview {
+  color: fade(@black, 50%);
+  font-size: 11pt;
+  font-weight: 300;
+}
+
+.drzBlog-feed-none {
+  text-align: center;
+}
diff --git a/src/droplets/blog-grid/index.js b/src/droplets/blog-grid/index.js
@@ -0,0 +1,123 @@
+import Vue from 'vue';
+
+const template = require('./template.html');
+
+export default Vue.component('blog-grid-droplet', {
+  template,
+  name: 'blog-grid-droplet',
+  mounted() {
+    const $blogGrid = $(this.$refs.blogGrid);
+    const formatDate = this.formatDate;
+    const truncate = this.truncate;
+    $blogGrid.drzFilterGrid({
+      output(data) {
+        return `
+        <div class="drzBlog-grid-card">
+          <a class="drzBlog-grid-inner" href="${data.pageLink}">
+            <div class="drzBlog-grid-cardImageWrap">
+              <img class="drzBlog-grid-cardImage" data-asset="${data.image}" alt="${data.title}" />
+            </div>
+            <div class="drzBlog-grid-cardInfo">
+              <span class="drzBlog-grid-title">${data.title}</span>
+              <span class="drzBlog-grid-date">${formatDate(data.created)}</span>
+              <p class="drzBlog-grid-preview">${truncate(data.plainText, 150)}</p>
+            </div>
+          </a>
+        </div>
+        `;
+      },
+      filters: ['movie', 'music'],
+      pagination: 8,
+      searchKeys: ['title', 'plainText', 'author'],
+      feed: [
+        {
+          created: '2020-08-19T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title',
+          author: 'Seymour Butts',
+          plainText: 'Some text here asdn askd alksndalk nsdlkans dkansdl naslkdn alsndlkas ndlkasn dlknasdl nalsdn laksndl aknsdlk nasldnalsndlaksn dlkans ldknas dlknasld knalskdn lasknd laksndl adl akmdsl alsdmakls mdaksmd lkmasldm alksdml kamsdlm aslkdmaslk mdlaksm dlkasmd kasda sdasd asd asd',
+          pageLink: '#',
+          categories: ['movie'],
+        },
+        {
+          created: '2020-08-20T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 2',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: ['movie'],
+        },
+        {
+          created: '2020-08-21T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 3',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: ['movie', 'music'],
+        },
+        {
+          created: '2020-08-22T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 4',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: [],
+        },
+        {
+          created: '2020-08-23T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 5',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: ['movie', 'music'],
+        },
+        {
+          created: '2020-08-24T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 6',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: ['music'],
+        },
+        {
+          created: '2020-08-25T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 7',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: [],
+        },
+        {
+          created: '2020-08-26T19:31:14.835Z',
+          image: '/static/images/mock-blog.svg',
+          title: 'Blog Title 8',
+          author: 'Seymour Butts',
+          plainText: 'Some text here...',
+          pageLink: '#',
+          categories: ['movie', 'music'],
+        },
+      ],
+    });
+  },
+  methods: {
+    formatDate(date) {
+      const string = new Date(date);
+      const month = string.getMonth() + 1;
+      const day = string.getDate();
+      const year = (string.getFullYear()).toString().slice(-2);
+      return `${month}/${day}/${year}`;
+    },
+    truncate(text, limit) {
+      if (text.length < limit) {
+        return text;
+      }
+      return `${text.substring(0, limit)}...`;
+    },
+  },
+});
diff --git a/src/droplets/blog-grid/template.html b/src/droplets/blog-grid/template.html
@@ -0,0 +1,8 @@
+<div class="drzFilter-grid" ref="blogGrid">
+  <div class="drzFilter-grid-bar">
+    <form role="search" class="drzFilter-grid-searchBox">
+      <input class="drzFilter-grid-searchInput" name="search" type="text" placeholder="Search..." />
+    </form>
+  </div>
+  <div class="drzFilter-grid-container"></div>
+</div>
diff --git a/src/droplets/blog-grid/themes/default/styles.less b/src/droplets/blog-grid/themes/default/styles.less
@@ -0,0 +1,49 @@
+.drzBlog-grid-card {
+  border-color: #dedede;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+}
+
+.drzBlog-grid-inner {
+  .drzClearFix;
+  height: 100%;
+  text-decoration: none;
+}
+
+.drzBlog-grid-cardImageWrap {
+  display: block;
+}
+
+.drzBlog-grid-cardImage {
+  width: 100%;
+}
+
+.drzBlog-grid-img {
+  width: 100%;
+}
+
+.drzBlog-grid-cardInfo {
+  .drzClearFix;
+  color: fade(@black, 60%);
+  padding: 10px;
+}
+
+.drzBlog-grid-title {
+  display: block;
+  font-size: 13pt;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.drzBlog-grid-date {
+  display: block;
+  font-size: 10pt;
+  font-weight: 300;
+}
+
+.drzBlog-grid-preview {
+  font-size: 11pt;
+  font-weight: 300;
+  margin: 8px 0;
+}
diff --git a/src/droplets/footer-nav/plugin.js b/src/droplets/footer-nav/plugin.js
@@ -10,9 +10,9 @@
     $topLink.click((e) => {
       const $this = $(e.currentTarget);
       if (window.matchMedia(drzzle.viewports.mobile).matches) {
-        e.preventDefault();
         // if there us even a dropdown menu
         if ($this.next('ul').length) {
+          e.preventDefault();
           $this.next('ul').slideToggle(200);
           $this.parent().siblings().find('.drzFooterNav-list-subList').slideUp(200);
         }

diff --git a/src/droplets/navigation/plugin.js b/src/droplets/navigation/plugin.js
@@ -6,6 +6,7 @@
 (($) => {
   $.fn.drzNav = function drzNav() {
     const $this = $(this);
+    const $inner = $this.find('.drzNav-inner');
     const $navList = $this.find('.drzNav-list');
     const $dropDownLink = $this.find('.drzNav-link-dropDown');
     const $subDropDownLink = $this.find('.drzNav-link-subDropDown');
@@ -181,7 +182,7 @@
         });
       },
       fitCheck() {
-        $navWidth = ~~($this.outerWidth());
+        $navWidth = ~~($inner.outerWidth());
         // recheck for hamburgerWidth and navWidth
         if ($navHamburger.is(':visible')) {
           $hamburgerWidth = ~~($navHamburger.outerWidth());
@@ -216,8 +217,8 @@
           $searchMarginRight = 0;
         }
         // add in left/right padding & margins of nav items that don't normally get calculated
-        const $navPadLeft = parseInt($this.css('padding-left'), 10);
-        const $navPadRight = parseInt($this.css('padding-right'), 10);
+        const $navPadLeft = parseInt($inner.css('padding-left'), 10);
+        const $navPadRight = parseInt($inner.css('padding-right'), 10);
         // nav is not there in editor, that's why
         const $navBuffer = parseInt($navWidth - ($logoWidth +
                                   $hamburgerWidth + $navPadLeft +