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

Inline styles

Browse source
This commit is contained in:
Oliver Davies 2019-06-14 21:29:26 +01:00
parent 7022f9cb99
commit d5826702c9
2 changed files with 14 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/ProjectViewSwitcher.vue
View file

@ -1,11 +1,21 @@
<template>
<div>
<button type="button" class="p-2" :class="{ active: activeMode == 'grid'}" @click="$emit('changed', 'grid')">
<button
type="button"
class="p-2 text-gray-700 hover:bg-white hover:rounded hover:shadow"
:class="{ 'bg-white rounded shadow text-blue-400': mode == 'grid'}"
@click="$emit('changed', 'grid')"
>
<span class="visuallyhidden">View projects in a grid</span>
<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath id="a"><path d="M12.2 5v4.8H17V5zm0 12H17v-4.8h-4.8zM5 5h4.8v4.8H5zm0 12v-4.8h4.8V17z" fill="none" clip-rule="evenodd"/></clipPath><clipPath id="b"><path fill="none" d="M0 0h22v22H0z"/></clipPath><clipPath id="c"><path fill="none" d="M5 5h12v12H5z"/></clipPath></defs><g clip-path="url(&quot;#a&quot;)"><g clip-path="url(&quot;#b&quot;)" style="clip-path:url(&quot;#icon-grid-b&quot;)"><g clip-path="url(&quot;#c&quot;)"><path d="M0 0h22v22H0z"/></g></g></g></svg>
</button>
<button type="button" class="p-2 ml-2" :class="{ active: activeMode == 'list'}" @click="$emit('changed', 'list')">
<button
type="button"
class="ml-2 p-2 text-gray-700 hover:bg-white hover:rounded hover:shadow"
:class="{ 'bg-white rounded shadow text-blue-400': mode == 'list'}"
@click="$emit('changed', 'list')"
>
<span class="visuallyhidden">View projects in a list</span>
<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22"><defs><clipPath id="link-icon-a"><path d="M5,5V7H19V5Zm14,7V10H5v2ZM5,17H19V15H5Z" style="fill: none; clip-rule: evenodd;"></path></clipPath><clipPath id="link-icon-b"><rect width="24" height="22" style="fill: none;"></rect></clipPath><clipPath id="link-icon-c"><rect x="5" y="5" width="14" height="12" style="fill: none;"></rect></clipPath></defs><title>Asset 1</title><g style="clip-path: url(&quot;#link-icon-a&quot;);"><g style="clip-path: url(&quot;#link-icon-b&quot;);"><g style="clip-path: url(&quot;#link-icon-c&quot;);"><rect width="24" height="22"></rect></g></g></g></svg>
</button>
@ -15,24 +25,10 @@
<script>
export default {
props: {
activeMode: {
mode: {
type: String,
required: true
}
}
}
</script>
<style type="postcss" scoped>
button {
@apply text-gray-700;
&:hover {
@apply bg-white rounded shadow
}
}
.active {
@apply bg-white rounded shadow text-blue-400
}
</style>

2
src/views/Projects.vue
View file

@ -10,7 +10,7 @@
<div class="flex justify-between items-baseline">
<page-title class="mb-6">All Projects</page-title>
<project-view-switcher @changed="projectViewSwitched" :active-mode="displayMode"></project-view-switcher>
<project-view-switcher @changed="projectViewSwitched" :mode="displayMode"></project-view-switcher>
</div>
<div v-if="displayMode == 'grid'" class="flex flex-wrap mt-4 -mb-8 -mx-4">