Merge pull request #77 from troglodyne/ptcms

Ptcms

.gitignore

@@ -3,3 +3,4 @@
 favicon.ico
 dist/
 www/assets/*.*
+data/DUMMY.json

Makefile

@@ -1,12 +1,16 @@
 .PHONY: install
 install:
-	mkdir $(HOME)/.tcms; /bin/true
+	test -d $(HOME) || mkdir $(HOME)/.tcms
 
 .PHONY: test
-test:
+test: reset-dummy-data
 	prove t/*.t
 
+.PHONY: reset-dummy-data
+reset-dummy-data:
+	cp -f data/DUMMY-dist.json data/DUMMY.json
+
 .PHONY: depend
 depend:
 	sudo apt install -y sqlite3 libsqlite3-dev libdbd-sqlite3-perl cpanminus starman  libcal-dav-perl libtext-xslate-perl libserver-starter-perl liburl-encode-perl libplack-perl libcal-dav-perl libconfig-tiny-perl libdatetime-format-http-perl libjson-maybexs-perl libuuid-tiny-perl libcapture-tiny-perl libconfig-simple-perl libdbi-perl libfile-slurper-perl libfile-touch-perl libfile-copy-recursive-perl libxml-rss-perl
-	sudo cpanm Mojo::File Date::Format WWW::SitemapIndex::XML WWW::Sitemap::XML
+	sudo cpanm Mojo::File Date::Format WWW::SitemapIndex::XML WWW::Sitemap::XML HTTP::Body

www/styles/screen.css

@@ -58,6 +58,8 @@ audio, video {
  font-family: courier;
  font-size: 1em;
  font-weight: bold;
+ padding-left: .5rem;
+ line-height: 2rem;
 }
 #midtitle, .midtitle {
  text-align: center;
@@ -115,37 +117,67 @@ audio, video {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/icon/rss.png', sizingMethod='scale')";
 }
+.postericon {
+ width: 2.5rem;
+ height: 2.5rem;
+}
 .usericon, .buddyicon {
- width: 1em;
- height: 1em;
- float: right;
- background-size: 1em;
+ width: 2rem;
+ height: 2rem;
+ display: inline-block;
+}
+.usericon, .buddyicon, .postericon {
+ background-size: cover;
  background-repeat: no-repeat;
- margin-left:1rem;
- border-radius: 50%;
  padding-right: unset !important;
 }
+.postericon {
+ float: right;
+}
+.circle, .usericon, .buddyicon, .postericon {
+ border-radius: 50%;
+}
+.portrait {
+ position: absolute;
+ background-color: white;
+ border: solid black 5px;
+ height: 10rem;
+ width: 10rem;
+ background-size: cover;
+ top: 13.5rem;
+}
+.banner {
+ position: relative;
+ padding: .5rem;
+ box-sizing: border-box;
+ resize: horizontal;
+ overflow: clip;
+ max-width: 45rem;
+ min-height: 25rem;
+ width: 100%;
+ background-repeat: no-repeat;
+ background-position: top center;
+ margin-left: auto;
+ margin-right: auto;
+}
+.banner > #postData {
+ position: absolute;
+ top: 19rem;
+ left: 12rem;
+}
 .avatar {
  width: 3em;
  height: 3em;
  float: left;
  background-size: 3em;
 }
-button#clickme {
+span#clickme {
  display: none;
- float: right;
- box-shadow: 0px 0px 0.5em #66CCFF;
- padding: 0 .25em;
- margin: .25em;
- font-size: .60em;
- background-color: #333;
- border-radius: .5em;
- border: .25em solid black;
- color: red;
+ font-size: 2rem;
+ line-height: 2rem;
 }
-button#clickme:active {
- padding-left: .30em;
- border-color: gray;
+span#clickme:hover {
+ cursor: pointer;
 }
 .coolbutton, .cooltext, textarea {
  box-sizing: border-box;
@@ -197,6 +229,8 @@ img.mblogimg, {
 h3.blogtitles {
  margin-bottom: .5em;
  margin-top: 0px;
+ height: 2.5rem;
+ line-height: 2.5rem;
 }
 em.blogdetail {
  font-size: .8em;
@@ -256,12 +290,15 @@ p.posteditortitle {
 }
 /*Responsive design stuff that used to be in JS, modify as needed*/
 @media (max-width: 1024px) {
-  #lefttitle {
-    width: 100%;
-    max-width: 100%;
-  }  
-  #clickme {
-    display: table-cell !important;
+  div#midtitle {
+      display: none;
+  }
+  div#lefttitle {
+    min-width: calc(100vw - 5.5rem);
+  }
+  span#clickme {
+    display: inline-block;
+    flex-shrink: 0;
   }
   #righttitle, #configbar {
     visibility: hidden;
@@ -272,11 +309,12 @@ p.posteditortitle {
     max-width: 100%;
     background-color: rgba(0,0,0,.75);
     border-bottom-left-radius: 1em;
+    padding-left: .5rem;
   }
-  #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
+  #clickme:hover ~ #righttitle, #clickme:active ~ #righttitle, #clickme:focus ~ #righttitle, #righttitle:hover, #righttitle a:active, #clickme:active ~ #configbar, #clickme:focus ~ #configbar, #configbar:hover, #configbar a:active  {
     visibility: visible;
   }
-  #righttitle a, #configbar a {
+  #righttitle > a, #configbar a {
     display: block;
     border-right: 0;
   }

www/styles/structure.css

@@ -1,5 +1,5 @@
 /*First, we start off with specifying what parts of the DOM we want hidden*/
-#leftbar, #rightbar, #footbar, #midtitle {
+#leftbar, #rightbar, #footbar {
  display: none;
 }
 
@@ -12,7 +12,7 @@ body {
  max-height: 100%;
 }
 #topkek {
- display: table;
+ display: flex;
  position: fixed;
  z-index: 2;
  top: 0;
@@ -23,17 +23,13 @@ body {
  display: table-cell;
 }
 #lefttitle {
- padding-left: .5em;
- max-width: 50%;
- min-width: 33%;
+ flex 1 0 33%;
 }
 #midtitle {
- width: 33%;
+ flex-grow: 1; 
 }
 #righttitle {
- min-width: 33%;
- max-width: 50%;
- padding-right: .5em;
+ flex 1 0 33%;
 }
 #righttitle a, #configbar a {
  display: inline-block;

www/templates/index.tx

@@ -5,7 +5,7 @@
     <div id="midtitle" class="toplel">
         <: $midtitle | mark_raw :>
     </div>
-    <button title="Menu" id="clickme">&#9776;</button>
+    <span title="Menu" id="clickme" onclick="this.focus()">🌐</span>
     <div id="righttitle" class="toplel">
         <a href="/news"   title="Micro Blog" class="topbar">News</a>
         <a href="/blog"   title="Blog" class="topbar">Blog</a>
@@ -21,10 +21,10 @@
             <input class="coolbutton" type="submit" value="🔎"></input>
             <a class="topbar" target="_blank" href="<: $search_help :>" title="<: $search_lang :>">❓</a>
         </form>
-        : if ($user) {
-        <a href="/config" title="config" class="topbar usericon <: $user :>"></a>
-        : }
     </div>
+    : if ($user) {
+    <a href="/config" title="Preferences" class="topbar usericon <: $user :>"></a>
+    : }
 </div>
 <div id="littlemenu">
 </div>

www/templates/posts.tx

@@ -23,6 +23,7 @@
                 Your browser does not support the video tag.
             </video>
         : } else {
+            diddley
             <div class="responsive preview" style="background-image:url(<: $post.preview :>)"></div>
         : }
             <p class="midtitle"><: $post.title :></p>
@@ -42,7 +43,7 @@
                 </form>
                 : }
                 <span id="<: $post.id :>-<: $post.version :>-time" style="float:right;"><: $post.created :></span>
-                <a class='usericon <: $post.user :>' title='Posted by <: $post.user :>'></a>
+                <a class='postericon <: $post.user :>' title='Posted by <: $post.user :>'>&nbsp;</a>
             </h3>
             : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
                 <div style="background-image:url(<: $post.preview :>);" class="responsive preview"></div>
@@ -75,11 +76,15 @@
                 <div style="background-image:url(<: $post.href :>);" class="responsive preview"></div>
             : }
             : if ( $post.wallpaper ) {
-                <div style="background-image:url(<: $post.wallpaper :>);">
-                    <div style="background-image:url(<: $post.preview :>);" class="responsive preview usericon"></div>
+                <div style="background-image:url(<: $post.wallpaper :>);" class="banner">
+                    <div style="background-image:url(<: $post.preview :>);" class="circle portrait"></div>
+            : }
+            : if( $post.data ) {
+                <div id="postData"><: $post.data | mark_raw :></div>
+            : }
+            : if( $post.wallpaper ) {
                 </div>
             : }
-            : $post.data | mark_raw;
             : if ( $can_edit ) {
             <br />
             <a style="display: inline-block;" onclick="switchMenu('<: $post.id :>-<: $post.version :>');">[Edit]</a>