work on publish date

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
-    "/app.js": "/app.js?id=163400f675e5656ac518",
-    "/light.css": "/light.css?id=2121e5d00e1013ad79de",
-    "/dark.css": "/dark.css?id=c13fb96ffa6f2eee8b60",
+    "/app.js": "/app.js?id=68fd17b668533a1647cd",
+    "/light.css": "/light.css?id=8e89114957501a2a2ff8",
+    "/dark.css": "/dark.css?id=9b71aa0a7c48cd60e734",
     "/favicon.png": "/favicon.png?id=b0b34b4095fcdbb8942d"
 }

readme.md

@@ -96,6 +96,8 @@ Here's the plan for what's coming:
 - [x] Optimize CSS. Move to Tailwind?
 - [x] Add text search inside listings.
 - [x] Filter posts by status, scheduling, tags, and authors
+- [x] Dark mode.
+- [ ] Enhance publishing date picker. (Make it use browser time & show text feedback)
 - [ ] Create an initial theme that people can use right away. @themsaid
 - [ ] Optimize image uploads and allow cropping.
 - [ ] Adding image galleries to posts and pages. @themsaid
@@ -109,7 +111,6 @@ And here are some ideas I'm still not sure about:
 - [ ] Localization
 - [ ] Multi-lingual content
 - [ ] Attach metadata to posts and pages.
-- [ ] Dark mode.
 
 
 ## Contributing

resources/js/base.js

@@ -12,6 +12,14 @@ export default {
 
 
     methods: {
+        /**
+         * Determine if the given date is in the future.
+         */
+        dateInTheFuture(date) {
+            return moment().diff(moment(date + ' Z'), 'minutes') < 0;
+        },
+
+
         /**
          * Show the time ago format for the given time.
          */

resources/js/components/DateTimePicker.vue

@@ -70,7 +70,7 @@
             <span class="px-1">/</span>
             <select class="input px-2"
                     v-model="dateComponents.year">
-                <option v-for="value in Array.from({length: 5}, (_, i) => i + (new Date()).getFullYear())" :value="value">{{value}}</option>
+                <option v-for="value in Array.from({length: 15}, (_, i) => i + (new Date()).getFullYear() - 10)" :value="value">{{value}}</option>
             </select>
             <span class="pl-5"> </span>
             <select class="input px-2"

resources/js/screens/posts/edit.vue

@@ -431,16 +431,18 @@
                 Make sure your post has a friendly title and slug.
             </div>
 
-            <div class="input-group pt-0 mb-10">
-                <label class="input-label">Publish Date (M/D/Y H:M)</label>
+            <div class="input-group pt-0">
+                <label class="input-label">Publish Date (M/D/Y H:M) UTC</label>
                 <date-time-picker v-model="form.publish_date"></date-time-picker>
                 <form-errors :errors="errors.publish_date"></form-errors>
             </div>
 
-            <button class="btn-sm btn-primary" @click="publishPost" v-if="!form.published" v-loading="status">Publish this post</button>
-            <button class="btn-sm btn-primary" @click="publishPost" v-if="form.published" v-loading="status">Update Post</button>
-            <button class="btn-sm btn-light" @click="unpublishPost" v-if="form.published" v-loading="status">Convert to draft</button>
-            <button class="btn-sm btn-light" @click="publishingModalShown = false">Cancel</button>
+            <div class="mt-10">
+                <button class="btn-sm btn-primary" @click="publishPost" v-if="!form.published" v-loading="status">Publish this post</button>
+                <button class="btn-sm btn-primary" @click="publishPost" v-if="form.published" v-loading="status">Update Post</button>
+                <button class="btn-sm ml-1 btn-light" @click="unpublishPost" v-if="form.published" v-loading="status">Convert to draft</button>
+                <button class="btn-sm ml-1 btn-light" @click="publishingModalShown = false">Cancel</button>
+            </div>
         </modal>
 
         <!-- SEO & Social Modal -->

resources/js/screens/posts/index.vue

@@ -1,5 +1,4 @@
 <script type="text/ecmascript-6">
-    import moment from 'moment';
     import loadsEntries from '../loadsEntries';
     import FiltersDropdown from '../../partials/FilterDropdown.vue';
 
@@ -71,14 +70,6 @@
             },
 
 
-            /**
-             * Determine if the given date is in the future.
-             */
-            dateInTheFuture(date) {
-                return moment().diff(moment(date + ' Z'), 'minutes') < 0;
-            },
-
-
             /**
              * Clear the filters.
              */

resources/sass/light.scss

@@ -116,5 +116,5 @@ select:-webkit-autofill:focus{
     -webkit-text-fill-color: config('colors.text-color');
     -webkit-box-shadow: 0 0 0px 1000px config('colors.contrast') inset;
     transition: background-color 5000s ease-in-out 0s;
-    color: red;
+    color: config('colors.text-color');
 }