From 6403839ff9e3c683ea01a5f96f6bad0af14c397d Mon Sep 17 00:00:00 2001 From: HumairAK Date: Tue, 12 Jul 2016 07:06:34 -0400 Subject: Added various additions to user-profile, added new styles to creative.css (minor), added styles to custom stylesheet (minor) --- .idea/workspace.xml | 662 +++++++++++++++++++++++++++++++++++++++++------- assets/css/creative.css | 27 ++ assets/css/style.css | 205 +-------------- assets/js/script.js | 53 ++++ user_profile_alt.html | 317 +++++++++++++++-------- 5 files changed, 876 insertions(+), 388 deletions(-) create mode 100644 assets/js/script.js diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 6aa513d..7bad097 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,11 +2,11 @@ + + - - - + @@ -26,62 +26,141 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -105,9 +187,10 @@ DEFINITION_ORDER - @@ -120,7 +203,7 @@ - + @@ -133,7 +216,13 @@ - + + + + + + + @@ -143,6 +232,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + project + + + true + + bdd + + DIRECTORY + + false + + + @@ -161,6 +304,7 @@ + 1468117129577 @@ -180,29 +324,47 @@ - - + - + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -262,7 +522,61 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -307,7 +621,61 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -331,14 +699,6 @@ - - - - - - - - @@ -349,36 +709,158 @@ - - + + - + - - + + - + + + + + + + + + + + + + + + + + - - + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/css/creative.css b/assets/css/creative.css index 0155dba..37936e3 100644 --- a/assets/css/creative.css +++ b/assets/css/creative.css @@ -331,4 +331,31 @@ header .header-content .header-content-inner hr { margin-top:20px; } +/****************************************/ +/* user-profile-nav */ +/* only children of navbar-custom are affected*/ +.navbar-custom{ + background-color: #ffffff; /* Green */ + margin: 0 0 3px 0; + text-decoration: none; + font-size: 1em; + -webkit-transition-duration: 0.4s; /* Safari */ + transition-duration: 0.4s; + border-radius: 10px 10px 0px 0px; +} + +.navbar-custom .navbar-toggle{ + border-color: #ddd; +} +.navbar-custom .navbar-toggle .icon-bar{ + background-color: #888; +} +.navbar-custom li a{ + padding: 12px; +} +.navbar-custom .navbar-nav li a:hover { + background-color: #d9edf7; + color: #3170a6; +} +/********************************************/ diff --git a/assets/css/style.css b/assets/css/style.css index ff26ab4..660b021 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -386,205 +386,20 @@ p.solutions-type{ padding-bottom: 15px; } -/**********************************************************************************************************************/ -/*THE USER-PROFILE PAGE BEGINS HERE*/ -#user-profile-content{ - flex: 1; - width: 60%; - background-color: rgba(235,235,235, 0.6); - -} - -#user-menu-container{ - - height: 100%; - - /* For column layout remove width below - and add column class for container*/ - width: 25%; - float: left; -} - -#user-menu{ - padding: 3%; - width: 100%; -} - -#user-avatar{ - /* Center image display*/ - display: flex; - justify-content: center; - align-content: center; - - padding: 3%; - background-color: white; - border-radius: 15px; - height: 200px; - box-shadow: 7px 5px 10px #b3b3b3; - - /* top, right, bot, left */ - margin: 100px 10px 10px 10px; -} -#user-avatar img{ - max-width: 100%; - height: auto; - /*margin: 3px 3px 20px 3px;*/ - -} -#user-photo-edit{ - background-color: white; - border-radius: 15px; - height: auto; - box-shadow: 7px 5px 10px #b3b3b3; - margin: 10px 10px 10px 10px; +/********** user-profile styles **********/ +.user-info-content{ + padding-top: 100px; } - -#user-options{ - background-color: white; - border-radius: 15px; - box-shadow: 7px 5px 10px #b3b3b3; - margin: 10px 10px 10px 10px; -} - -#user-info-container{ - display: flex; - justify-content: center; - align-content: center; - - /* For column layout remove width below - and add column class for container*/ - width: 75%; - float: left; -} - -#user-info{ - background-color: white; - border-radius: 15px; - height: auto; - width: 100%; - box-shadow: 7px 5px 10px #b3b3b3; - - /* top, right, bot, left */ - margin: 110px 20px 20px 15px; - -} -#user-info #user-name h1{ - padding: 20px; - text-align: left; - margin: 0; - color: white; - font-size: 1.5em; -} - -#user-name{ - height: auto; - width: 100%; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - background-color: #73a195; -} -#user-content{ - min-height: 400px; - text-align: left; - +.user-info-content img{ + max-width: 100px; } -#user-content h2{ - margin: 0; +.user-info-content p{ color: gray; - padding: 10px 10px 10px 10px; - -} -#user-content p{ - padding: 0 10px 10px 50px; - display: block; - word-wrap: break-word; -} - -#user-content em{ - font-weight: bolder; - font-style: normal; -} -#user-content span{ - padding-left: 10px; -} - -/* Button styles*/ - - -[class^="menu-button"]{ - background-color: #ffffff; /* Green */ - width: 100%; - border: none; - color: #a4a4a4; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - cursor: pointer; - -webkit-transition-duration: 0.4s; /* Safari */ - transition-duration: 0.4s; - - border: solid #cfcfcf 1px; -} - -[class^="menu-button"]:hover { - background-color: #73a195; - color: white; -} - -.menu-button-first{ - border-top-left-radius: 10px; - border-top-right-radius: 10px; - margin-top: 0; -} -.menu-button-last{ - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - margin-bottom: 0; } - - -.edit-button { - display: inline-block; - border-radius: 4px; - background-color: #ffffff; - border: none; - color: #979797; - text-align: center; - font-size: 1em; - padding: 10px; - width: auto; - transition: all 0.5s; - cursor: pointer; +.prf-sign-off{ margin: 15px; - border: solid #c7c7c7 3px; - border-radius: 15px; } - -.edit-button span { - cursor: pointer; - display: inline-block; - position: relative; - transition: 0.5s; -} - -.edit-button span:after { - content: 'ยป'; - position: absolute; - opacity: 0; - top: 0; - right: -20px; - transition: 0.5s; -} - -.edit-button:hover span { - padding-right: 25px; -} - -.edit-button:hover span:after { - opacity: 1; - right: 0; +.prf-tables{ + text-align: left; } - -/********** !user-profile *********/ \ No newline at end of file +/********** !user-profile styles *********/ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..f73d7f0 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,53 @@ +function main(){ + + + // User-profile dynamic paging + var items = [ + $("#profile-general"), + $("#profile-follows"), + $("#profile-friends"), + $("#profile-inbox"), + $("#profile-comments")]; + + function hidePages(){ + items.forEach(function(item){ + item.hide(); + }); + } + + // Hide all pages at load + hidePages(); + + // Show General page + items[0].show(); + + $('.prf-page').bind('click', function(e){ + + e.preventDefault(); + hidePages(); + + /* Each case will need to be changed to call a handler for fetching data + * from server*/ + switch($(this).text()) { + case "General": + $("#profile-general").show(); + break; + case "Follows": + $("#profile-follows").show(); + break; + case "Friends": + $("#profile-friends").show(); + break; + case "Inbox": + $("#profile-inbox").show(); + break; + case "Comments": + $("#profile-comments").show(); + break; + default: + console.log("Error: User page not found"); + } + }); + +} +$(document).ready(main); \ No newline at end of file diff --git a/user_profile_alt.html b/user_profile_alt.html index f152761..dee5962 100644 --- a/user_profile_alt.html +++ b/user_profile_alt.html @@ -21,6 +21,7 @@ + @@ -74,118 +75,53 @@
- - - - - - - +
+ + +
+ -
-
-
- Edit Profile - Logout -
-

July 4 2016

-
-

Walter White

-
-
-
User Pic
+
+ + +
+
+ User Pic +
@@ -227,15 +163,190 @@ + +
+ +

You are following:

+
+
+ + + + + + + + + + + + + + + + +
+ avatar + +

The Dude

+

3 comments

+
+ avatar + +

He-Man

+

20 comments

+
+ avatar + +

Lady Lips

+

56 comments

+
+
+ + +
+ +
+ +

Friends

+
+ + + + + + + + + + + + + + + + + +
+ avatar + +

He-Man

+

20 comments

+
+ avatar + +

Jay Leno

+

5 comments

+
+ avatar + +

Lisa Simpson

+

658 comments

+
+
+ + +
+ +
+

Inbox

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DateSubjectSender
2016-05-01Great Solution!1The Dude
2016-04-05Woah look at thisLady Lips
2016-02-30I don't get this, help!The Dude
2016-01-15I solved your problemLisa
+
+ +
+ +
+

Comment History

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DateCommentExam
2016-05-01Use BFS! Not DFS!CSC148 > Winter 2014
2016-04-05Use a heap!CSC263 > Fall 2015
2016-02-30I love python!CSC108 > Winter 2015
2016-01-15I hate verilog!CSC258 > Fall 2015
+
+
+ + +
+

July 4 2016

+ Edit Profile + Logout +
+ +
+
- -