grim/devweb

put some basic styling in place
draft
2021-01-25, Gary Kramlich
93e0bbec756e
Parents 2bcd291942a3
Children 97a0f1ad2718
put some basic styling in place
5 files changed, 35 insertions(+), 24 deletions(-)
  • +8 -5
    frontend/dev/index.html
  • +4 -4
    frontend/index.html
  • +5 -5
    frontend/src/App.vue
  • +14 -8
    frontend/src/components/BookList.vue
  • +4 -2
    frontend/src/components/Navigation.vue
    • --- a/frontend/dev/index.html Mon Jan 25 03:07:44 2021 -0600
    +++ b/frontend/dev/index.html Mon Jan 25 04:11:12 2021 -0600
    @@ -1,10 +1,13 @@
    -<!DOCTYPE html5>
    -<html>
    +<!DOCTYPE html>
    +<html lang="en" class="h-full">
    <head>
    - <title>Foo Bar</title>
    + <meta charset="UTF-8" />
    + <link rel="icon" href="/favicon.ico" />
    + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    + <title>DevWeb</title>
    </head>
    - <body>
    - <div id="app"></div>
    + <body class="h-full">
    + <div id="app" class="h-full"></div>
    <script type="module" src="http://localhost:3000/@vite/client"></script>
    <script type="module" src="http://localhost:3000/src/main.js"></script>
    </body>
    --- a/frontend/index.html Mon Jan 25 03:07:44 2021 -0600
    +++ b/frontend/index.html Mon Jan 25 04:11:12 2021 -0600
    @@ -1,13 +1,13 @@
    <!DOCTYPE html>
    -<html lang="en">
    +<html lang="en" class="h-full">
    <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    - <title>Vite App</title>
    + <title>DevWeb</title>
    </head>
    - <body>
    - <div id="app"></div>
    + <body class="h-full">
    + <div id="app" class="h-full"></div>
    <script type="module" src="/src/main.js"></script>
    </body>
    </html>
    --- a/frontend/src/App.vue Mon Jan 25 03:07:44 2021 -0600
    +++ b/frontend/src/App.vue Mon Jan 25 04:11:12 2021 -0600
    @@ -1,9 +1,9 @@
    <template>
    - <div>
    - <span>DevWeb</span>
    - </div>
    - <div class="h-full flex flex-row items-stretch">
    - <Navigation/>
    + <div class="h-full flex flex-row items-stretch divide-x">
    + <div class="flex flex-col p-2 space-y-2">
    + <div><a href="https://keep.imfreedom.org/grim/devweb/">DevWeb</a></div>
    + <Navigation/>
    + </div>
    <router-view></router-view>
    </div>
    </template>
    --- a/frontend/src/components/BookList.vue Mon Jan 25 03:07:44 2021 -0600
    +++ b/frontend/src/components/BookList.vue Mon Jan 25 04:11:12 2021 -0600
    @@ -1,12 +1,10 @@
    <template>
    <ol>
    - <li
    - v-for="book in books"
    - :key="book.id"
    - :active="current === book.id || null"
    - >
    - <router-link :to="'/'+book.id+'/'+book.defaultVersion">{{book.displayName}}</router-link>
    - </li>
    + <router-link v-for="book in books" :to="'/'+book.id+'/'+book.defaultVersion">
    + <li :key="book.id" :active="current === book.id || null">
    + {{book.displayName}}
    + </li>
    + </router-link>
    </ol>
    </template>
    @@ -38,7 +36,15 @@
    </script>
    <style scoped>
    +ol {
    + @apply divide-y
    +}
    +
    +li {
    + @apply p-2
    +}
    +
    li[active] {
    - @apply bg-blue-200 text-white
    + @apply bg-gray-400 text-white
    }
    </style>
    --- a/frontend/src/components/Navigation.vue Mon Jan 25 03:07:44 2021 -0600
    +++ b/frontend/src/components/Navigation.vue Mon Jan 25 04:11:12 2021 -0600
    @@ -1,6 +1,8 @@
    <template>
    - <div class="border-black divide-y divide-x">
    - <input v-model="searchText" placeHolder="Search" type="search">
    + <div class="space-y-2">
    + <div class="shadow flex">
    + <input class="w-full rounded p-2" v-model="searchText" placeHolder="Search..." type="search">
    + </div>
    <SearchResults v-if="searchText" v-bind:searchText="searchText"/>
    <BookList v-else/>
    </div>