Skip to content
This repository has been archived by the owner on Oct 29, 2019. It is now read-only.

Commit

Permalink
Merge pull request #423 from rcos/project-page
Browse files Browse the repository at this point in the history 
Project page styling
  • Loading branch information
@agundy
agundy committed Apr 22, 2016
2 parents 8a861da + cd92fb4 commit 4575cc5
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 278 deletions.
12 changes: 11 additions & 1 deletion client/app/projectchooser/projectchooser.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,15 @@
height: auto;
width: auto;
max-height: 100%;
max-width: 100%
max-width: 100%;
background-color: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

button {
margin-bottom: 10px;
}


}
57 changes: 29 additions & 28 deletions client/app/projects/profile/profile.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ angular.module('observatory3App')
};
updateProject();

$scope.selectImage = function() {
angular.element('#uploadImage').trigger('click');
};
$scope.editProject = function() {
$scope.editedProject = angular.copy($scope.project);

Expand Down Expand Up @@ -66,25 +69,37 @@ angular.module('observatory3App')
$scope.getPic = function(user) {
if (! ('avatar' in user)){
user.avatar = "//www.gravatar.com/avatar/00000000000000000000000000000000?d=monsterid";
$http.get('/api/users/' + user._id + '/avatar') .success(function(avatar){
$http.get('/api/users/' + user._id + '/avatar').success(function(avatar){
user.avatar = avatar;
})
});
} else {
}
return user.avatar
}

var initializeSlides = function(photos) {
var slides = [];
for (var i = 0; i < photos.length; i++){
slides.push({
id: i,
active: false,
image: $scope.imgPrefix + photos[i],
src: photos[i]
});
if (i === 0) {
slides[0].active = true;
}
if(photos.length > 0) {
for (var i = 0; i < photos.length; i++){
slides.push({
id: i,
active: false,
image: $scope.imgPrefix + photos[i],
src: photos[i]
});
if (i === 0) {
slides[0].active = true;
}
}
}
else {
slides.push({
id: 0,
active: true,
placeholder: true,
image: '../../assets/images/projectplaceholder.png',
src: '../../assets/images/projectplaceholder.png'
});
}
$scope.slides = slides;
}
Expand All @@ -99,7 +114,7 @@ angular.module('observatory3App')

$scope.isLoggedIn = Auth.isLoggedIn;
$scope.isAdmin = Auth.isAdmin;

$scope.isMentor = Auth.isMentor;

$scope.joinProject = function(){
$http.put('/api/users/' + $scope.user._id + '/project',{
Expand Down Expand Up @@ -212,18 +227,4 @@ angular.module('observatory3App')
};

//end tech bubble code


})
.directive('desc', function() {
return {
restrict:'E',
template: '<div btf-markdown=\'project.description\'></div> \
<textarea ng-show=\'edittingDesc && userOnProject\' ng-model=\'project.description\' ></textarea>'
};
}).directive('pname', function() {
return {
restrict:'E',
template: '<input type=\'text\' maxlength="50" ng-show=\'edittingName && userOnProject\' ng-model=\'project.name\'><br>'
};
})
});
170 changes: 80 additions & 90 deletions client/app/projects/profile/profile.html
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,94 @@
<div ng-include="'components/navbar/navbar.html'"></div>

<div class="container">
<div class="row text-left">
<div class="col-sm-3">
<h1 ng-hide="edittingName">{{project.name}}</h1>
<p>
<pname></pname>
</p>
</div>
<div class="col-sm-9 text-right header-buttons">
<a class="btn btn-info" href="{{project.websiteUrl}}" title="">Website</a>
<a class="btn btn-info" href="{{project.repositories[0]}}" title="" ng-show="project.repositories.length == 1">Repository <span class="glyphicon glyphicon-menu-right"></span></a>
<div class="btn-group" uib-dropdown is-open="repositoryMenu" ng-show="project.repositories.length > 1">
<a class="btn btn-info dropdown-toggle" uib-dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">
Repositories <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="{{repo}}" ng-repeat="repo in project.repositories">{{repo}} <span class="glyphicon glyphicon-menu-right"></span></a></li>
</ul>
</div>
<a class="btn btn-info" href="/projects/{{project.githubUsername}}/{{project.githubProjectName}}/blog" title="">Blog</a>

</div>
<div class="col-sm-9 text-right header-buttons">
<button type="button" ng-show='isLoggedIn() && !userOnProject' class="btn btn-success" ng-click='joinProject()'>Join Project</button>
<button type="button" ng-show='isLoggedIn() && userOnProject' class="btn btn-danger" ng-click='leaveProject()'>Leave Project</button>
<button type="button" ng-show='isAdmin() && project.markedDefault' class="btn btn-success" ng-click='unmarkDefault()'>Unmark Default</button>
<button type="button" ng-show='isAdmin() && !project.markedDefault' class="btn btn-success" ng-click='markDefault()'>Mark Default</button>
<button type="button" ng-show='isLoggedIn() && userOnProject && project.active' class="btn btn-warning" ng-click='markPast()'>Mark Past Project </button>
<button type="button" ng-show='isLoggedIn() && userOnProject && !project.active' class="btn btn-warning" ng-click='markActive()'>Mark Active Project </button>
<button type="button" class="btn btn-primary" ng-click="editProject()" ng-show="userOnProject">
Edit Project
</button>
<div class="container project-profile">
<div class="row text-left">
<div class="col-sm-3">
<h1 ng-hide="edittingName">{{project.name}}</h1>
</div>
<div class="col-sm-9 text-right header-buttons">
<a class="btn btn-info" href="{{project.websiteUrl}}" title="" target="_blank">Website</a>
<a class="btn btn-info" href="{{project.repositories[0]}}" title="" ng-show="project.repositories.length === 1" target="_blank">Repository <span class="glyphicon glyphicon-menu-right"></span></a>
<div class="btn-group" uib-dropdown is-open="repositoryMenu" ng-show="project.repositories.length > 1">
<a class="btn btn-info dropdown-toggle" uib-dropdown-toggle role="button" aria-haspopup="true" aria-expanded="false">
Repositories <span class="caret"></span>
</a>
<ul class="dropdown-menu" uib-dropdown-menu>
<li><a href="{{repo}}" ng-repeat="repo in project.repositories">{{repo}}<span class="glyphicon glyphicon-menu-right"></span></a></li>
</ul>
</div>
<a class="btn btn-info" href="/projects/{{project.githubUsername}}/{{project.githubProjectName}}/blog" title="">Blog</a>
</div>
<div class="col-sm-9 text-right header-buttons">
<button type="button" ng-show='isLoggedIn() && !userOnProject' class="btn btn-success" ng-click='joinProject()'>Join Project</button>
<button type="button" ng-show='isLoggedIn() && userOnProject' class="btn btn-danger" ng-click='leaveProject()'>Leave Project</button>
<button type="button" ng-show='isAdmin() && project.markedDefault' class="btn btn-success" ng-click='unmarkDefault()'>Unmark Default</button>
<button type="button" ng-show='isAdmin() && !project.markedDefault' class="btn btn-success" ng-click='markDefault()'>Mark Default</button>
<button type="button" ng-show="isMentor() && userOnProject && project.active" class="btn btn-warning" ng-click="markPast()">Mark Past Project</button>
<button type="button" ng-show="isMentor() && userOnProject && !project.active" class="btn btn-warning ng-hide" ng-click="markActive()">Mark Active Project</button>
<button type="button" class="btn btn-primary" ng-click="editProject()" ng-show="userOnProject">Edit Project</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="tech-tags">
<div class="tech-boxes">
<span ng-repeat="tech in project.tech track by $index">
{{tech}}
<g class="glyphicon glyphicon-remove" ng-show='isLoggedIn() && userOnProject' class='btn btn=default btn-xs' ng-click='removeTech(tech)' aria-hidden="true"></g>
</span>
<input ng-show='isLoggedIn() && userOnProject' ng-enter="addTechBubble()" ng-model="insertTechContent" size='4' type='text' />
<button ng-show='isLoggedIn() && userOnProject' ng-click="addTechBubble()" class="btn btn-default btn-xs">+</button>
</div>

</div>
</div>
<div class="row">
<div class="col-sm-7 project-image">

<div class="fileUpload btn btn-sm btn-default" ng-show="userOnProject">
<span>Upload Images</span>
<div id="upload">
<input type="file" ngf-select="upload($file)" />
</div>
</div>
<div class="remove-photo btn btn-sm btn-default text-right" ng-show="userOnProject && project && slides.length" ng-click="deletePhoto()">
<span>X</span>
</div>

<p ng-show="project.photos.length === 0">
No images uploaded yet.
</p>
</div>
<div class="row">
<div class="row-height">
<div class="col-xs-12 col-sm-7 col-sm-height col-sm-top">
<div class="project-image inside">
<uib-carousel active="active" no-wrap="true">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" active="slide.active">
<img ng-src="{{ slide.image }}" index="slide.id" style="margin:auto;">
</uib-slide>
</uib-carousel>

<uib-carousel active="active" no-wrap="true">
<uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id" active="slide.active">
<img ng-src="{{ slide.image }}" index="slide.id" style="margin:auto;">
</uib-slide>
</uib-carousel>
<button class="btn btn-sm btn-default" ng-click="selectImage()" ng-show="userOnProject">Upload Images</button>
<input id="uploadImage" type="file" ngf-select="upload($file)" />
<g class="glyphicon glyphicon-remove remove-photo btn btn-default" ng-show="userOnProject && project && !slides[0].placeholder" ng-click="deletePhoto()"></g>
</div>

<div class="col-sm-4">
<div class="contributors">
<div class="row">
<h4>Contributors</h4>
</div>
<div class="row" ng-repeat="user in authors">
<div class="col-md-3">
<img ng-src="{{getPic(user)}}&s=128px" class="img-responsive" alt="">

</div>
<div class="col-md-8">
<a href="/users/{{ user._id }}/profile" title="" class="contributor-name">
{{ user.name }}
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5 col-sm-height col-sm-top">
<div class="description inside-full-height">
<h3>About</h3>
<div class="description-text" btf-markdown="project.description"></div>
</div>
</div>
</div>
<div class="row">
<br>
</div>
<div class="row">
<div class="col-sm-7 description">
<desc></desc>
</div>
<div class="col-sm-4">
<div class="tech-tags">
<h4>Tech Tags</h4>
<div class='tech-boxes'>
<div ng-repeat="tech in project.tech track by $index">
{{tech}}
<button ng-show='isLoggedIn() && userOnProject' class='btn btn=default btn-xs' ng-click='removeTech(tech)'>x</button>
</div>
<input ng-show='isLoggedIn() && userOnProject' ng-enter="addTechBubble()" ng-model="insertTechContent" size='4' type='text' />
<button ng-show='isLoggedIn() && userOnProject' ng-click="addTechBubble()" class="btn btn-default btn-xs">+</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="contributors">
<div class="container-fluid">
<div class="row">
<h3>Contributors</h3>
</div>
<div class="row image-row">
<div ng-repeat="user in authors | orderBy: '+name'">
<div class="col-xs-4 col-sm-2 col-md-2 text-center user-box">
<a href="/users/{{ user._id}}/profile" class="user-avatar">
<img class="profile-img img-responsive img-circle placeholder-img" ng-src='{{user.avatar}}&s=248px'>
</a>
<p class="user-name">
<a href="/users/{{ user._id}}/profile">{{ user.name }}</a>
</p>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div ng-include="'components/footer/footer.html'"></div>
Loading

0 comments on commit 4575cc5

Please sign in to comment.