Skip to content

change ng-class to just another class and add sass partials for user pro... #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
benfenton wants to merge 1 commit into
base: master
Choose a base branch
from
Open

change ng-class to just another class and add sass partials for user pro... #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion sass/partials/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import 'structure/all';
@import 'navigation/all';
@import 'general/all';
@import 'general/all';
@import 'users/all';
2 changes: 1 addition & 1 deletion sass/partials/structure/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
@import 'window';
@import "layout";
@import 'layout';
1 change: 1 addition & 0 deletions sass/partials/users/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import 'my_projects';
4 changes: 4 additions & 0 deletions sass/partials/users/_my_projects.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.inactive {
background-color: $grey;
padding: 5px;
}
Copy link
Owner

@wlingke wlingke Apr 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably don't need a "_my_projects.scss". A general "_projects.scss" should suffice for all project type things.

Also you probably need an overarching '.pd-projects' class selector and use something like:

.pd-projects {
    //styles specific to projects
    &.inactive { //could potentally also use .active instead of &.active depending on how HTML is structure
        //override styles specific to projects
    }
}

Copy link
Owner

@wlingke wlingke Apr 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should look at how bootstrap structures their css. It's a good design to follow. On a general level:

  1. you have one high-level class for UI -types (like .alert, .carousel, .btn, etc).
  2. You modify that class with additional classes like .alert-success or .btn.active

You can also look at how they structure their SASS. Generally SASS should be structured by 'ui' - never by page so that you can keep things reusable and consistent.

2 changes: 1 addition & 1 deletion static/client/users/account/partials/my-projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<h2 class="text-center page-header">My Projects</h2>

<ul class="media-list" infinite-scroll="lazy.query()" infinite-scroll-disabled="lazy.stopLoading">
<li class="media" ng-repeat="project in lazy.data" ng-class="{{ project.data.active ? 'active' : 'inactive' }}">
<li class="media {{ project.data.active ? 'active' : 'inactive' }}" ng-repeat="project in lazy.data">
<div class="pull-right">
Copy link
Owner

@wlingke wlingke Apr 7, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should be ng-class = "{'inactive': !project.data.active}" You shouldn't use bindings inside class attribute; you must use ng-class attribute for dynamic things.

Check the angular docs for ng-class examples/explanation

<ul class="list-unstyled">
<li><a ng-href="/edit-project/{{project.getId()}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
Expand Down
Loading