From c89cd1b5377ac6f311ba75b987d52a1867fd726d Mon Sep 17 00:00:00 2001 From: Tommy Parnell Date: Wed, 16 Nov 2016 21:34:32 -0500 Subject: [PATCH] add a profiles card --- card.css | 248 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 5 ++ profile.html | 60 +++++++++++++ profile.js | 18 ++++ 4 files changed, 331 insertions(+) create mode 100644 card.css create mode 100644 profile.html create mode 100644 profile.js diff --git a/card.css b/card.css new file mode 100644 index 0000000..2f9fe54 --- /dev/null +++ b/card.css @@ -0,0 +1,248 @@ + + +.card { + padding-top: 20px; + margin: 10px 0 20px 0; + background-color: rgba(214, 224, 226, 0.2); + border-top-width: 0; + border-bottom-width: 2px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.card .card-heading { + padding: 0 20px; + margin: 0; +} + +.card .card-heading.simple { + font-size: 20px; + font-weight: 300; + color: #777; + border-bottom: 1px solid #e5e5e5; +} + +.card .card-heading.image img { + display: inline-block; + width: 46px; + height: 46px; + margin-right: 15px; + vertical-align: top; + border: 0; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} + +.card .card-heading.image .card-heading-header { + display: inline-block; + vertical-align: top; +} + +.card .card-heading.image .card-heading-header h3 { + margin: 0; + font-size: 14px; + line-height: 16px; + color: #262626; +} + +.card .card-heading.image .card-heading-header span { + font-size: 12px; + color: #999999; +} + +.card .card-body { + padding: 0 20px; + margin-top: 20px; +} + +.card .card-media { + padding: 0 20px; + margin: 0 -14px; +} + +.card .card-media img { + max-width: 100%; + max-height: 100%; +} + +.card .card-actions { + min-height: 30px; + padding: 0 20px 20px 20px; + margin: 20px 0 0 0; +} + +.card .card-comments { + padding: 20px; + margin: 0; + background-color: #f8f8f8; +} + +.card .card-comments .comments-collapse-toggle { + padding: 0; + margin: 0 20px 12px 20px; +} + +.card .card-comments .comments-collapse-toggle a, +.card .card-comments .comments-collapse-toggle span { + padding-right: 5px; + overflow: hidden; + font-size: 12px; + color: #999; + text-overflow: ellipsis; + white-space: nowrap; +} + +.card-comments .media-heading { + font-size: 13px; + font-weight: bold; +} + +.card.people { + position: relative; + display: inline-block; + width: 170px; + height: 300px; + padding-top: 0; + margin-left: 20px; + overflow: hidden; + vertical-align: top; +} + +.card.people:first-child { + margin-left: 0; +} + +.card.people .card-top { + position: absolute; + top: 0; + left: 0; + display: inline-block; + width: 170px; + height: 150px; + background-color: #ffffff; +} + +.card.people .card-top.green { + background-color: #53a93f; +} + +.card.people .card-top.blue { + background-color: #427fed; +} + +.card.people .card-info { + position: absolute; + top: 150px; + display: inline-block; + width: 100%; + height: 101px; + overflow: hidden; + background: #ffffff; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.card.people .card-info .title { + display: block; + margin: 8px 14px 0 14px; + overflow: hidden; + font-size: 16px; + font-weight: bold; + line-height: 18px; + color: #404040; +} + +.card.people .card-info .desc { + display: block; + margin: 8px 14px 0 14px; + overflow: hidden; + font-size: 12px; + line-height: 16px; + color: #737373; + text-overflow: ellipsis; +} + +.card.people .card-bottom { + position: absolute; + bottom: 0; + left: 0; + display: inline-block; + width: 100%; + padding: 10px 20px; + line-height: 29px; + text-align: center; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.card.hovercard { + position: relative; + padding-top: 0; + overflow: hidden; + text-align: center; + background-color: rgba(214, 224, 226, 0.2); +} + +.card.hovercard .cardheader { + background: url("http://lorempixel.com/850/280/nature/4/"); + background-size: cover; + height: 135px; +} + +.card.hovercard .avatar { + position: relative; + top: -50px; + margin-bottom: -50px; +} + +.card.hovercard .avatar img { + width: 100px; + height: 100px; + max-width: 100px; + max-height: 100px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + border: 5px solid rgba(255,255,255,0.5); +} + +.card.hovercard .info { + padding: 4px 8px 10px; +} +input[type="text"] +{ + background: transparent; + border: none; +} +.card.hovercard .info .title { + margin-bottom: 4px; + font-size: 24px; + line-height: 1; + color: #262626; + vertical-align: middle; +} + +.card.hovercard .info .desc { + overflow: hidden; + font-size: 12px; + line-height: 20px; + color: #737373; + text-overflow: ellipsis; +} + +.card.hovercard .bottom { + padding: 0 20px; + margin-bottom: 17px; +} + +.btn{ border-radius: 50%; width:32px; height:32px; line-height:18px; } diff --git a/index.html b/index.html index ef6f970..1821b79 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,11 @@ + + + + + diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..5d2e259 --- /dev/null +++ b/profile.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + +
+
+
+
+

Welcome, please sign in.

+ +
+
+
+
+
+ +
+
+
+ TerribleDev +
+         
+         
+         
+
+
+ + + + + +
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..7017705 --- /dev/null +++ b/profile.js @@ -0,0 +1,18 @@ +// Code goes here + +(function(){ + var app = angular.module("awesome", ["firebase"]); + app.controller("awesome", function($scope, $firebaseObject, $firebaseAuth) { + var auth = $firebaseAuth(); + $scope.auth = auth; + $scope.auth.$onAuthStateChanged(function(firebaseUser) { + $scope.firebaseUser = firebaseUser; + var ref = firebase.database().ref(); + var syncObject = $firebaseObject(ref.child('profiles').child(firebaseUser.uid)); + syncObject.$bindTo($scope, "profile"); + }); + }); + + + +})();