opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'next'

Browse source
This commit is contained in:
Oliver Davies 2019-03-21 00:27:51 +00:00
parent decaf7330a 0b2f5df650
commit ec419a82cb
8 changed files with 38 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -8,7 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next", "tailwindcss": "^1.0.0-beta.3",
"tailwindcss-skip-link": "^1.0.1", "tailwindcss-skip-link": "^1.0.1",
"vue": "^2.5.17" "vue": "^2.5.17"
}, },

2
public/index.html
View file

@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Rebuilding Bartik with Vue.js and Tailwind CSS</title> <title>Rebuilding Bartik with Vue.js and Tailwind CSS</title>
</head> </head>
<body class="text-black bg-black text-sm leading-normal"> <body class="font-sans text-black bg-black text-sm leading-normal">
<noscript> <noscript>
<strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>

6
src/components/DrupalMessage.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]"> <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
<div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes"> <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
<svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-3 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg> <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-300 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
@ -16,13 +16,13 @@ export default {
computed: { computed: {
classes: function () { classes: function () {
return { return {
status: 'border-green-2 text-green-4 bg-green-1', status: 'border-green-200 text-green-400 bg-green-100',
}[this.type] }[this.type]
}, },
wrapperClasses: function () { wrapperClasses: function () {
return { return {
status: 'bg-green-3', status: 'bg-green-300',
}[this.type] }[this.type]
}, },
} }

4
src/components/MainMenu.vue
View file

@ -2,7 +2,7 @@
<div> <div>
<button <button
type="button" type="button"
class="w-full p-3 block sm:hidden bg-blue-1 text-sm text-grey-6 text-left focus:outline-none" class="w-full p-3 block sm:hidden bg-blue-100 text-sm text-grey-600 text-left focus:outline-none"
@click="open = !open" @click="open = !open"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -25,7 +25,7 @@
> >
<a <a
class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center" class="block text-sm no-underline text-black px-3 py-2 rounded-lg md:rounded-none md:rounded-t-lg sm:text-center"
:class="[ index == activeTab ? 'bg-white' : 'bg-blue-1 hover:bg-white' ]" :class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
:href="link.href" :href="link.href"
> >
{{ link.title }} {{ link.title }}

2
src/components/SidebarBlock.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="bg-grey-1 p-4 mb-4"> <div class="bg-grey-100 p-4 mb-4">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

18
src/components/Welcome.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="bg-blue-3"> <div class="bg-blue-300">
<div class="py-4 text-white"> <div class="py-4 text-white">
<div id="header" class="xl:max-w-6xl mx-auto px-4 relative"> <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
<div class="flex flex-col-reverse"> <div class="flex flex-col-reverse">
@ -26,8 +26,8 @@
<drupal-message type="status"> <drupal-message type="status">
<p> <p>
A Bartik clone, built with A Bartik clone, built with
<a href="https://vuejs.org" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Vue.js</a> <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
and <a href="https://tailwindcss.com" class="text-blue-3 hover:text-blue-2 no-underline border-b border-dotted hover:border-solid border-blue-3">Tailwind CSS</a>. and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
</p> </p>
</drupal-message> </drupal-message>
@ -48,13 +48,13 @@
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4"> <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
<sidebar-block> <sidebar-block>
<h2 class="font-serif font-normal text-base text-grey-6 border-b border-solid border-grey-3 mb-3">Search</h2> <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300 mb-3">Search</h2>
<div> <div>
<form action="#" class="flex"> <form action="#" class="flex">
<input type="text" class="border border-solid border-grey-4 p-2 w-full xl:w-auto"> <input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
<button type="submit" class="bg-grey-2 px-3 rounded-full border-b border-solid border-grey-5 ml-2 flex-none"> <button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
<img src="img/loupe.svg" class="block"> <img src="img/loupe.svg" class="block">
</button> </button>
</form> </form>
@ -67,7 +67,7 @@
<div id="footer" class="text-xs text-white"> <div id="footer" class="text-xs text-white">
<div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4"> <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
<div class="border-t border-solid border-grey-6 pt-6 -mb-6"> <div class="border-t border-solid border-grey-600 pt-6 -mb-6">
<div class="mb-6"> <div class="mb-6">
<p><a href="#0">Contact</a></p> <p><a href="#0">Contact</a></p>
</div> </div>
@ -116,11 +116,11 @@ export default {
} }
#main a { #main a {
@apply text-blue-3 no-underline border-b border-blue-1 border-dotted; @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
&:hover, &:hover,
&:focus { &:focus {
@apply text-blue-1 border-solid @apply text-blue-100 border-solid
} }
} }

33
tailwind.config.js
View file

@ -6,28 +6,31 @@ module.exports = {
60: 'rgba(0,0,0,.6)', 60: 'rgba(0,0,0,.6)',
}, },
blue: { blue: {
1: '#bcdefa', 100: '#bcdefa',
2: '#3490dc', 200: '#3490dc',
3: '#2779bd', 300: '#2779bd',
}, },
green: { green: {
1: '#f3faee', 100: '#f3faee',
2: '#cde2c2', 200: '#cde2c2',
3: '#77b159', 300: '#77b159',
4: '#325e1c', 400: '#325e1c',
}, },
grey: { grey: {
1: '#f6f6f2', 100: '#f6f6f2',
2: '#f0f0f0', 200: '#f0f0f0',
3: '#dae1e7', 300: '#dae1e7',
4: '#b8c2cc', 400: '#b8c2cc',
5: '#8795a1', 500: '#8795a1',
6: '#3d4852', 600: '#3d4852',
}, },
transparent: 'transparent', transparent: 'transparent',
white: '#fff', white: '#fff',
}, },
extend: { extend: {
fontFamily: {
sans: ['sans-serif'],
},
fontSize: { fontSize: {
'3xl': '1.75rem', '3xl': '1.75rem',
}, },
@ -37,10 +40,6 @@ module.exports = {
}, },
}, },
plugins: [ plugins: [
require('tailwindcss/plugins/container')({
center: true,
padding: '1rem',
}),
require('tailwindcss-skip-link')(), require('tailwindcss-skip-link')(),
] ]
} }

56
yarn.lock
View file

@ -1440,13 +1440,6 @@ babel-eslint@^10.0.1:
eslint-scope "3.7.1" eslint-scope "3.7.1"
eslint-visitor-keys "^1.0.0" eslint-visitor-keys "^1.0.0"
babel-extract-comments@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
dependencies:
babylon "^6.18.0"
babel-loader@^8.0.5: babel-loader@^8.0.5:
version "8.0.5" version "8.0.5"
resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
@ -1464,32 +1457,6 @@ babel-plugin-dynamic-import-node@^2.2.0:
dependencies: dependencies:
object.assign "^4.1.0" object.assign "^4.1.0"
babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
babel-plugin-transform-object-rest-spread@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
dependencies:
babel-plugin-syntax-object-rest-spread "^6.8.0"
babel-runtime "^6.26.0"
babel-runtime@^6.26.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
babylon@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
balanced-match@^1.0.0: balanced-match@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@ -2262,7 +2229,7 @@ copy-webpack-plugin@^4.6.0:
p-limit "^1.0.0" p-limit "^1.0.0"
serialize-javascript "^1.4.0" serialize-javascript "^1.4.0"
core-js@^2.4.0, core-js@^2.5.7: core-js@^2.5.7:
version "2.6.1" version "2.6.1"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
integrity sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg== integrity sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==
@ -6699,11 +6666,6 @@ regenerate@^1.2.1, regenerate@^1.4.0:
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg== integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.12.0: regenerator-runtime@^0.12.0:
version "0.12.1" version "0.12.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@ -7523,14 +7485,6 @@ strip-ansi@^5.0.0:
dependencies: dependencies:
ansi-regex "^4.0.0" ansi-regex "^4.0.0"
strip-comments@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
dependencies:
babel-extract-comments "^1.0.0"
babel-plugin-transform-object-rest-spread "^6.26.0"
strip-eof@^1.0.0: strip-eof@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@ -7633,9 +7587,10 @@ tailwindcss-skip-link@^1.0.1:
resolved "https://registry.yarnpkg.com/tailwindcss-skip-link/-/tailwindcss-skip-link-1.0.1.tgz#b965624ed0b007ddd33f0326f2719d9a88b857c7" resolved "https://registry.yarnpkg.com/tailwindcss-skip-link/-/tailwindcss-skip-link-1.0.1.tgz#b965624ed0b007ddd33f0326f2719d9a88b857c7"
integrity sha512-Hxivkqu7UEluZY+ZPv+aQv4dreqTfYRgniEtux4qb9yJPjyR4dXiHMIWk7LgNqsyCPKpoRL8FJq55uIQN4ms+w== integrity sha512-Hxivkqu7UEluZY+ZPv+aQv4dreqTfYRgniEtux4qb9yJPjyR4dXiHMIWk7LgNqsyCPKpoRL8FJq55uIQN4ms+w==
"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next": tailwindcss@^1.0.0-beta.3:
version "0.7.3" version "1.0.0-beta.3"
resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.3.tgz#66ac8e15377f4038cea6877e834a54edbc5ca295"
integrity sha512-J3KZ0gtpz1XVQ/D2xTuBMII1KmEb9LrQibIWtFRAXpa81yIeDM3v1g88M3Qr/lnjrJymi7zC3T2f9AdGuZ4oMw==
dependencies: dependencies:
autoprefixer "^9.4.5" autoprefixer "^9.4.5"
bytes "^3.0.0" bytes "^3.0.0"
@ -7651,7 +7606,6 @@ tailwindcss-skip-link@^1.0.1:
postcss-nested "^4.1.1" postcss-nested "^4.1.1"
postcss-selector-parser "^6.0.0" postcss-selector-parser "^6.0.0"
pretty-hrtime "^1.0.3" pretty-hrtime "^1.0.3"
strip-comments "^1.0.2"
tapable@^1.0.0, tapable@^1.1.0: tapable@^1.0.0, tapable@^1.1.0:
version "1.1.1" version "1.1.1"