Browse Source

user profile

master
arnaucode 6 years ago
parent
commit
b26533efa3
10 changed files with 189 additions and 64 deletions
  1. +1
    -1
      webapp/app.js
  2. +38
    -3
      webapp/css/own.css
  3. BIN
      webapp/img/background01.png
  4. +2
    -2
      webapp/index.html
  5. +3
    -1
      webapp/views/main/main.html
  6. +1
    -2
      webapp/views/navbar.html
  7. +0
    -31
      webapp/views/profile/profile.html
  8. +0
    -24
      webapp/views/profile/profile.js
  9. +85
    -0
      webapp/views/user/user.html
  10. +59
    -0
      webapp/views/user/user.js

+ 1
- 1
webapp/app.js

@ -12,7 +12,7 @@ angular.module('app', [
'app.login',
'app.main',
'app.newmodel',
'app.profile'
'app.user'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');

+ 38
- 3
webapp/css/own.css

@ -1,5 +1,40 @@
.o_nav {
background: #ffffff!important;
color: #000000!important;
/*border-bottom: 2px solid #4DD0E1!important;*/
background: #ffffff !important;
color: #000000 !important;
/*border-bottom: 2px solid #4DD0E1!important;*/
}
body {
background: #f5f8fa;
}
.o_userProfileBackground {
min-height: 30% !important;
width: 100%;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('../img/background01.png');
text-align: center;
/*color: white;*/
/* Create the parallax scrolling effect */
/*background-attachment: fixed;*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
}
.o_userImgCircular {
margin-top: -100px;
margin-left: 25%;
background: #ffffff;
width: 50%;
border: 4px #ffffff solid;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}

BIN
webapp/img/background01.png

Before After
Width: 634  |  Height: 393  |  Size: 245 KiB

+ 2
- 2
webapp/index.html

@ -24,7 +24,7 @@
<body ng-app="webapp">
<div ng-include="'views/navbar.html'"></div>
<br><br><br><br>
<br>
<div ng-view></div>
@ -61,7 +61,7 @@ Works for both browser and electron with the same code -->
<script src="views/login/login.js"></script>
<script src="views/main/main.js"></script>
<script src="views/newmodel/newmodel.js"></script>
<script src="views/profile/profile.js"></script>
<script src="views/user/user.js"></script>
<!-- ELECTRON

+ 3
- 1
webapp/views/main/main.html

@ -2,7 +2,9 @@
<div class="row">
<div class="col-sm-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" ng-src="http://localhost:8080/ipfs/QmUE6hhNsyUA5emj2dviVDNYK7mSbPeZmRKeCYthmtemeA" alt="Card image cap">
<a ng-href="#!/user">
<img class="card-img-top" ng-src="http://localhost:8080/ipfs/QmUE6hhNsyUA5emj2dviVDNYK7mSbPeZmRKeCYthmtemeA" alt="Card image cap">
</a>
<div class="card-body">
<h5 class="card-title">Post1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

+ 1
- 2
webapp/views/navbar.html

@ -1,5 +1,5 @@
<div ng-controller="NavbarCtrl">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-dark c_blue500">
<a class="navbar-brand" href="#">
<i title="Server" class="fa fa-cube fa-1x"></i> decentralized-blogging-platform
</a>
@ -18,7 +18,6 @@
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav" ng-show="user">
<li class="nav-item">

+ 0
- 31
webapp/views/profile/profile.html

@ -1,31 +0,0 @@
<div class="container">
<div class="row">
<div class="col-sm-4">
<div ng-include="'views/user_template.html'"></div>
</div>
<div class="col-sm-8">
<div class="card">
<table class="table table-striped table-hover ">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Description</th>
<th>Accuracy</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="model in user.models">
<td>1</td>
<td>{{model.title}}</td>
<td>{{model.description}}</td>
<td>{{model.accuracy}}</td>
<td>{{model.rating}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

+ 0
- 24
webapp/views/profile/profile.js

@ -1,24 +0,0 @@
'use strict';
angular.module('app.profile', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/profile', {
templateUrl: 'views/profile/profile.html',
controller: 'ProfileCtrl'
});
}])
.controller('ProfileCtrl', function($scope, $rootScope, $http) {
$http.get(clienturl + 'user')
.then(function(data) {
console.log('data success');
console.log(data);
$scope.user = data.data;
localStorage.setItem("ai_user", JSON.stringify($scope.user));
}, function(data) {
console.log('no user');
});
});

+ 85
- 0
webapp/views/user/user.html

@ -0,0 +1,85 @@
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="o_userProfileBackground">
</div>
<div class="card-body">
<img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" />
<h4>
{{user.name}} {{user.lastname}}
</h4>
<p>{{user.description}}</p>
<p>
<a ng-href="#!/userLikes/{{user._id}}">
14 followers
</a> |
<a ng-href="#!/userLikes/{{user._id}}">
20 following
</a>
</p>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<b>About</b>
<p>
Twitter <a ng-href="https://twitter.com/{{user.twitter}}" target="_blank">{{user.twitter}}</a>
</p>
<p>
Github <a ng-href="https://github.com/{{user.github}}" target="_blank">{{user.github}}</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div ng-repeat="post in user.posts">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
<img ng-src="{{post.img}}" class="img-fluid" />
<p class="card-text">{{post.content}}</p>
<div class="pull-right">
<i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
</div>
</div>
</div>
<br>
</div>
</div>
<div class="col-sm-3">
<div class="card">
<div class="card-body">
<b>Discover</b>
<p>
bla bla bla bla bla
</p>
<p>
bla bla bla bla bla
</p>
</div>
</div>
<br>
<div class="card">
<div class="card-body">
<b>Featured posts</b>
</div>
<div ng-repeat="post in featured_posts">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{post.subtitle}}</h6>
<img ng-src="{{post.img}}" class="img-fluid" />
<p class="card-text">{{post.content}}</p>
<div class="pull-right">
<i title="Server" class="fa fa-heart ct_red300 fa-1x"></i> 37
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>

+ 59
- 0
webapp/views/user/user.js

@ -0,0 +1,59 @@
'use strict';
angular.module('app.user', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/user', {
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
});
}])
.controller('UserCtrl', function($scope, $rootScope, $http) {
/*$http.get(apiurl + 'user/' + )
.then(function(data) {
console.log('data success');
console.log(data);
$scope.user = data.data;
}, function(data) {
console.log('no user');
});*/
//fake data
$scope.user = {
username: "mark_zuckerberg",
name: "Mark",
lastname: "Zuckerberg",
description: "Hi all, I'm here to write decentralized blog posts.",
twitter: "arnaucode",
github: "arnaucode",
posts: [
{
title: "This is the second post",
subtitle: "this is the subtitle of the second post",
img: "https://cdn-images-1.medium.com/fit/t/800/240/1*4_E6m7J0112DBi1Lmdniiw.png",
content: "Some quick example text to build on the card title and make up the bulk of the card's content."
},
{
title: "This is the first post",
subtitle: "this is the subtitle of the first post",
img: "https://bootstrap-themes.github.io/application/assets/img/unsplash_1.jpg",
content: "Some quick example text to build on the card title and make up the bulk of the card's content."
}
]
};
$scope.featured_posts= [
{
title: "Thinking about python development",
subtitle: "this is the subtitle of the second post",
img: "https://cdn.static-economist.com/sites/default/files/images/2015/09/blogs/economist-explains/code2.png",
content: "Some quick example text to build on the card title and make up the bulk of the card's content."
},
{
title: "Thinking about G",
subtitle: "this is the subtitle of the first post",
img: "https://cdn-images-1.medium.com/max/1600/1*RNkyx-Zq7w61eR74nMYgnA.jpeg",
content: "Some quick example text to build on the card title and make up the bulk of the card's content."
}
]
});

Loading…
Cancel
Save