added post page, and added write page, with text editor
arnaucode arnaucode@gmail.com
Sat, 03 Feb 2018 03:50:14 +0100
16 files changed,
353 insertions(+),
79 deletions(-)
jump to
M
webapp/app.js
→
webapp/app.js
@@ -12,17 +12,18 @@ 'app.signup',
'app.login', 'app.main', 'app.newmodel', - 'app.user' + 'app.user', + 'app.post', + 'app.write' ]). config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { $locationProvider.hashPrefix('!'); /*$routeProvider.otherwise({ redirectTo: '/main' });*/ - +console.log("window", window.location.hash); if((localStorage.getItem('dblog_user'))) { - console.log(window.location.hash); if((window.location.hash==='#!/login')||(window.location.hash==='#!/signup')) { window.location='#!/main';@@ -30,7 +31,7 @@ }
$routeProvider.otherwise({redirectTo: '/main'}); }else{ - if((window.location!=='#!/login')||(window.location!=='#!/signup')||(window.location!=='#!/main')) + if((window.location.hash!=='#!/login')||(window.location.hash!=='#!/signup')||(window.location.hash!=='#!/main')||(window.location.hash!=='#!/user')) { console.log('app, user no logged');
M
webapp/css/own.css
→
webapp/css/own.css
@@ -7,7 +7,10 @@
body { background: #f5f8fa; } - +a, a:hover { + text-decoration: none; + color: #000000; +} .o_userProfileBackground { min-height: 30% !important; width: 100%;@@ -29,12 +32,17 @@ color: #ffffff;
} .o_userImgCircular { - margin-top: -100px; - margin-left: 25%; + width: 60px; background: #ffffff; - width: 50%; - border: 4px #ffffff solid; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; } + +.o_profilePageImage { + border: 4px #ffffff solid; + margin-top: -100px; + margin-left: 25%; + width: 50%; + width: 50%; +}
A
webapp/fake_data.js
@@ -0,0 +1,72 @@
+var 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." + }, + { + 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." + } + ] +}; +var 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." + } +]; + +var 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." + }, + { + 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." + } +];
M
webapp/index.html
→
webapp/index.html
@@ -20,6 +20,7 @@
<link rel="stylesheet" href="css/own.css"> <link href="bower_components/cssMaterialColors/colors.css" rel="stylesheet"> + </head> <body ng-app="webapp">@@ -42,8 +43,8 @@ <script src="bower_components/angular-messages/angular-messages.js"></script>
<!-- Bootstrap --> - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <!-- Angular Chart -->@@ -54,7 +55,13 @@ <!-- toastr -->
<link rel="stylesheet" type="text/css" href="bower_components/angular-toastr/dist/angular-toastr.css" /> <script type="text/javascript" src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script> + <!-- medium-editor --> + <script src="node_modules/medium-editor/dist/js/medium-editor.js"></script> + <link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.css"> + <link rel="stylesheet" href="node_modules/medium-editor/dist/css/themes/default.css"> + <!-- app's js --> + <script src="fake_data.js"></script> <script src="app.js"></script> <script src="views/navbar.js"></script> <script src="views/signup/signup.js"></script>@@ -62,6 +69,9 @@ <script src="views/login/login.js"></script>
<script src="views/main/main.js"></script> <script src="views/newmodel/newmodel.js"></script> <script src="views/user/user.js"></script> + <script src="views/post/post.js"></script> + <script src="views/write/write.js"></script> + <!-- ELECTRON
M
webapp/package.json
→
webapp/package.json
@@ -8,6 +8,7 @@ "prestart": "npm install",
"start": "http-server" }, "dependencies": { - "bootstrap": "^4.0.0" + "bootstrap": "^4.0.0", + "medium-editor": "^5.23.3" } }
M
webapp/views/main/main.html
→
webapp/views/main/main.html
@@ -1,5 +1,31 @@
<div class="container"> <div class="row"> + <div class="col-sm-4"> + <div ng-repeat="post in posts" ng-if="$index % 3 == 0"> + <a ng-href="#!/post/{{post.id}}"> + <div ng-include="'views/templates/post-thumb-template.html'"></div> + </a> + <br> + </div> + </div> + <div class="col-sm-4"> + <div ng-repeat="post in posts" ng-if="$index % 3 == 1"> + <a ng-href="#!/post/{{post.id}}"> + <div ng-include="'views/templates/post-thumb-template.html'"></div> + </a> + <br> + </div> + </div> + <div class="col-sm-4"> + <div ng-repeat="post in posts" ng-if="$index % 3 == 2"> + <a ng-href="#!/post/{{post.id}}"> + <div ng-include="'views/templates/post-thumb-template.html'"></div> + </a> + <br> + </div> + </div> + </div> + <div class="row"> <div class="col-sm-3"> <div class="card" style="width: 18rem;"> <a ng-href="#!/user">
M
webapp/views/main/main.js
→
webapp/views/main/main.js
@@ -12,5 +12,8 @@
.controller('MainCtrl', function($scope, $rootScope, $http) { - + $scope.user = user; + $scope.featured_posts= featured_posts; + $scope.posts = posts; + });
A
webapp/views/post/post.html
@@ -0,0 +1,52 @@
+<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 o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" /> + <h4> + {{user.name}} {{user.lastname}} + </h4> + <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6> + <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-9"> + <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> + </div> + </div> +</div> +</div>
A
webapp/views/post/post.js
@@ -0,0 +1,25 @@
+'use strict'; + +angular.module('app.post', ['ngRoute']) + + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/post', { + templateUrl: 'views/post/post.html', + controller: 'PostCtrl' + }); + }]) + + .controller('PostCtrl', 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 = user; + $scope.post = user.posts[0]; + });
A
webapp/views/templates/post-thumb-template.html
@@ -0,0 +1,22 @@
+<div class="card"> + <div class="card-body"> + <a ng-href="#!/user/{{user.id}}" class="row"> + <div class="col-sm-3"> + <img class="o_userImgCircular" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" /> + </div> + <div class="col-sm-8"> + <b>{{user.name}} {{user.lastname}}</b> + <div class="mb-2 text-muted">@{{user.username}}</div> + </div> + </a> + </div> + <a ng-href="#!/post/{{post.id}}" 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> + </a> +</div>
M
webapp/views/user/user.html
→
webapp/views/user/user.html
@@ -5,10 +5,11 @@ <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" /> + <img class="o_userImgCircular o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" /> <h4> {{user.name}} {{user.lastname}} </h4> + <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6> <p>{{user.description}}</p> <p> <a ng-href="#!/userLikes/{{user._id}}">@@ -35,17 +36,7 @@ </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> + <div ng-include="'views/templates/post-thumb-template.html'"></div> <br> </div> </div>@@ -62,21 +53,11 @@ </p>
</div> </div> <br> - <div class="card"> - <div class="card-body"> - <b>Featured posts</b> - </div> + <div class=""> + <h5>Featured posts</h5> <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 ng-include="'views/templates/post-thumb-template.html'"></div> + <br> </div> </div> </div>
M
webapp/views/user/user.js
→
webapp/views/user/user.js
@@ -20,40 +20,6 @@ }, 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." - } - ] + $scope.user = user; + $scope.featured_posts= featured_posts; });
A
webapp/views/write/write.html
@@ -0,0 +1,55 @@
+<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 o_profilePageImage" ng-src="https://www.eyerys.com/sites/default/files/mark_zuckerberg.jpg" /> + <h4> + {{user.name}} {{user.lastname}} + </h4> + <h6 class="card-subtitle mb-2 text-muted">@{{user.username}}</h6> + <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-9"> + <div class="row"> + <div class="col-sm-10"> + <div class="form-group"> + <input type="text" class="form-control" placeholder="Title of the article..." style="font-weight:bold;"> + </div> + </div> + <div class="col-sm-2"> + <div ng-click="save()" class="btn btn-raised btn-block c_o_blue300 pull-right">Publicate</div> + </div> + </div> + <div class="card"> + <div class="card-body"> + <div class="editable" style="min-height: 500px; padding: 10px;"></div> + </div> + </div> + </div> + </div> +</div>
A
webapp/views/write/write.js
@@ -0,0 +1,42 @@
+'use strict'; + +angular.module('app.write', ['ngRoute']) + + .config(['$routeProvider', function($routeProvider) { + $routeProvider.when('/write', { + templateUrl: 'views/write/write.html', + controller: 'WriteCtrl' + }); + }]) + + .controller('WriteCtrl', function($scope, $rootScope, $http) { + $scope.content = ""; + var editor = new MediumEditor('.editable', { + toolbar: { + /* These are the default options for the toolbar, + if nothing is passed this is what is used */ + allowMultiParagraphSelection: true, + buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'], + diffLeft: 0, + diffTop: -10, + firstButtonClass: 'medium-editor-button-first', + lastButtonClass: 'medium-editor-button-last', + relativeContainer: null, + standardizeSelectionStart: false, + static: false, + /* options which only apply when static is true */ + align: 'center', + sticky: false, + updateOnEmptySelection: false + }, + autoLink: true, + placeholder: { + text: 'Start to writting your decentralized blog post...' + } + }).subscribe('editableInput', function (event, editable) { + // Do some work + $scope.content = editable.innerHTML; + console.log($scope.content); + }); + + });