Sneak Preview: New UNIX.COM UserCP VueJS Demo


Login or Register to Reply

 
Thread Tools Search this Thread
# 15  
Old 1 Day Ago
Update: Fixed the Safari issue with RTL Bootstrap (removed RTL Bootstrap, not needed.).
  • Chrome: Flawless
  • Opera: Flawless
  • Safari: Flawless
  • Firefox: Works fine if you really know how to whitelist and permit Javascript and localStorage().
# 16  
Old 18 Hours Ago
Vue Black Dashboard Mockup v0.06


Code:
https://www.unix.com/cp/index.php

Mostly cosmetic mockup changes:
  • Changed main font-family to Montserrat (same as main site).
  • Commented out sidebar menu items not necessary for mockup.
  • Restyled a number of pages (login, registration).
  • Restyled footer a bit.
  • Simplified mockup "member thanks" staff table.
  • Removed buggy RTL Bootstrap CSS file (since we do not need right-to-left text support because we are an English-only site).
  • Put a link to the Vue UserCP Mockup in the UserCP down down menu (main site, desktop) for all registered users.

Your Digital Artist, Neo Smilie
These 3 Users Gave Thanks to Neo For This Post:
Don Cragun (17 Hours Ago) RavinderSingh13 (18 Hours Ago) vgersh99 (7 Hours Ago)
# 17  
Old 17 Hours Ago
Vue Black Dashboard Mockup v0.07


Code:
https://www.unix.com/cp/index.php

Mostly cosmetic mockup changes:
  • Got rid of a number of the round purple buttons.
  • Added more "neo-ish" looking pics.
  • Other simple cosmetic mockup changes.

Functional change:
  • Moved mockup site specific data to external JS file:


Code:
<script src="https://www.unix.com/scripts/js/vue_usercp_mockup.min.js"></script>

Your Digital Artist and Site Slave, Neo Smilie

Image
Image
Image
Image
Image
This User Gave Thanks to Neo For This Post:
nezabudka (14 Hours Ago)
# 18  
Old 12 Hours Ago
A Slight Change in Direction Mockup v0.08

Vue Black Dashboard Mockup v0.08

"A Slight Change in Direction"

In early versions of this mockup I planned to use server-side PHP to write dynamic forum data to browser localStorage(); ; but now I have changed my mind and write PHP serve-side dynamic forum data as stringified Javascript objects and write the data as an external Javascript file on the server-side:

So, in this mockup version, have removed all dynamic mockup data (numeric chart data, table date, etc) and places in an external JS file, like so:

Code:
<script src="https://www.unix.com/scripts/js/vue_usercp_mockup_3.min.js?v=21"></script>

For example, in the current mockup this looks like:

Code:
var online_guests=JSON.stringify([13,156,46,288,99,333,13,156,46,88,199,33]);var online_members=JSON.stringify([223,52,406,38,992,3,131,560,46,808,99,331]);var online_staff=JSON.stringify([131,156,246,38,599,333,213,566,146,188,199,53]);var summary_forum=JSON.stringify(["2222K","8888K","111K","1"]);var prior_year=JSON.stringify(["MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC","JAN","FEB"]);var prior_halfyear=JSON.stringify(["SEP","OCT","NOV","DEC","JAN","FEB"]);var six_top_countries=JSON.stringify(["USA","GER","FR","UK","IN","TH"]);var striped_table=JSON.stringify([{id:1,name:"Dakota Rice",salary:"$36.738",country:"Niger",city:"Oud-Turnhout"},{id:2,name:"Minerva Hooper",salary:"$23,789",country:"Curaçao",city:"Sinaai-Waas"},{id:3,name:"Sage Rodriguez",salary:"$56,142",country:"Netherlands",city:"Baileux"},{id:4,name:"Philip Chaney",salary:"$38,735",country:"Korea, South",city:"Overland Park"},{id:5,name:"Doris Greene",salary:"$63,542",country:"Malawi",city:"Feldkirchen in Kärnten"}]);var purple_data=JSON.stringify([80,100,70,80,120,80]);var green_data=JSON.stringify([90,27,60,12,80,200]);var blue_data=JSON.stringify([53,20,10,80,100,45]);var pie2=JSON.stringify([["red","steelblue","navy"],[100,400,200]]);var pie1=JSON.stringify([["blue","red","limegreen","indigo"],[60,40,20,10]]);


Code:
https://www.unix.com/cp/index.php

Changes:
  • Moved all dynamic data to server-side Javascript.
  • Removed localStorage() for server-side forum data.
  • Changed all Vue components (charts, tables, badges) to get the data from the external JS file.

My plan is to write a PHP cron to pull the MySQL data for the VueCP and write the data to an external JS file (like the one above) and to use a random number on the external JS script URL to bust the cache so it updates when the user reloads the page.

So, in the first mockups with live data, I will not use AJAX calls on the clients-side; but will do the heavy lifting on the server-side, until I change my mind again Smilie
# 19  
Old 4 Hours Ago
Mockup v0.09

I have not uploaded this to the server yet (developing on my desktop), but FYI I have the mockup of the top two rows of the dashboard working with actual forum data (updating hourly), showing the thanks per month, discussions per month and posts per month over the past year and the lifetime totals for discussions, posts, participating users and thanks. See images below:

Image

Image

Image
# 20  
Old 4 Hours Ago
Vue Black Dashboard Mockup v0.09

"First Mockup with Live Forum Data"

Per the post above, I have written the PHP code to pull live data and create the required JS to make this work;
  • Top Row: One year of data for thanks per month, discussions per month, and posts per month.
  • Second Row: Four "lifetime badges" for discussions, posts, participating users and thanks
.

I would post the PHP code, but it's a mess at this point in time and I'm embarrassed to post it until I clean it up, LOL. Here is one function, the "make the JSON file for the yearly discussions stats:

Code:
<?php
function make_threads()
{
    global $vbulletin;
    for ($i = 11; $i >= 0; $i--) {
        $start = mktime(0, 0, 0, date("m") - $i, 1, date("Y"));
        $end = mktime(0, 0, 0, date("m") - ($i - 1), 1, date("Y"));
        $query = "select count(threadid) as count from thread where dateline >=" . $start . " AND dateline <" . $end;
        $t = $vbulletin->db->query_first($query);
        $threads[] = $t['count'];
    }
    $string = json_encode($threads);
    return $string;
}

Example output from function:

Code:
["445","456","511","442","320","264","281","202","189","217","255","176"]

Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
UserCP Main Menu Moved to UIM Neo What is on Your Mind? 0 12-23-2018 05:56 AM
Vuejs Periodic Table by Kadin Zhang Neo What is on Your Mind? 1 12-09-2018 10:25 AM
UserCP and Other Private User Area Revisions (Phase 0) Neo What is on Your Mind? 0 09-03-2018 07:32 AM
New UserCP Option to Hide Facebook Features Neo Post Here to Contact Site Administrators and Moderators 0 06-02-2012 12:40 PM
License with demo??? merlin UNIX for Dummies Questions & Answers 2 01-14-2003 05:37 PM