Cleaning up styling and markup across a few core and article pages

[pribeh]

I'm positive someone else is likely working on this as well but I thought I would go through a number of pages to clean up markup and styling. If the maintainers are interested I can provide these changes in a pull request. My focus with these changes is to use bootstrap and consistent markup/naming conventions, using as little styling as possible, to achieve a sensible (pleasant and readable) set of defaults.

I've attached some screens that show the results.

I'm providing some examples of the markup and styling for pages below. In server/views/default.html:

  <main id="content" role="main">
    {% block content %}{% endblock %}
  </main>

In articles/public/views/view.html:

<div class="container">
  <div class="col-solo-center">
    <div class="view-article" data-ng-controller="ArticlesController" data-ng-init="findOne()">
      <h1 class="view-title view-article-title" ng-bind="article.title"></h1>
      <div data-ng-if="hasAuthorization(article)">
          <a class="btn" href="/#!/articles/{{article._id}}/edit">
              <i class="glyphicon glyphicon-edit"></i>
          </a>
          <a class="btn" data-ng-click="remove(article);">
              <i class="glyphicon glyphicon-trash"></i>
          </a>
      </div>
      <div class="view-submitted view-article-submitted">
        <span class="view-name view-article-name" ng-bind="article.user.name"></span> | <span class="view-time view-article-time" ng-bind="article.created | date:'medium'"></span>
      </div>
      <div class="view-body view-article-body" data-ng-bind-html="article.content"></div>
    </div>
  </div>
</div>

In articles/public/views/list.html:

div class="container">
  <div class="col-solo-center">
    <div class="list-articles" data-ng-controller="ArticlesController" data-ng-init="find()">
      <div class="list-item list-item-article" data-ng-repeat="article in articles">
        <div class="pull-right" data-ng-if="hasAuthorization(article)">
          <a class="btn" href="/#!/articles/{{article._id}}/edit">
            <i class="glyphicon glyphicon-edit"></i>
          </a>
          <a class="btn" data-ng-click="remove(article);">
            <i class="glyphicon glyphicon-trash"></i>
          </a>
        </div>
        <h3 class="list-item-title list-item-article-title">
          <a data-ng-href="#!/articles/{{article._id}}" ng-bind="article.title"></a>
        </h3>
        <div class="list-item-body list-item-article-body"><span ng-bind-html="article.content | htmlToPlaintext | limitTo : 95"></span> ... <a href="#!/articles/{{article._id}}" class="list-item-readmore">Read More</a></div>
        <div class="list-item-submitted list-item-article-submitted">
          <span ng-bind="article.user.name"></span> | <span ng-bind="article.created | date:'medium'"></span>
        </div>
      </div>
      <h1 data-ng-hide="!articles || articles.length">No articles yet. <br> Why don't you <a href="/#!/articles/create">Create One</a>?</h1>
    </div>
  </div>
</div>

In articles/public/views/articles.css:

/* general article styling */
.col-solo-center {
    max-width:640px;
    margin:0 auto;
}

/* list-article styling */
.list-item-article {
    border-bottom: 1px solid #eee;
    padding-bottom:30px;
}
.list-item-article-title a {
    color:#2c3e50;
}
.list-item-article-body {
    margin-bottom:10px;
    font-size:16px;
}
.list-item-article-submitted {
    font-size:13px;
    color:#999;
    display:block;
}

/* view-article styling */
.view-article-submitted {
    font-size:14px;
    color:#999;
    margin-bottom:30px;
    display:block;
}
.view-article-body, .view-article-body p {
    font-size:19px;
    line-height:1.6;
    margin-bottom:30px;
}

/* form-article styling */
h1.form-article-title {
    margin-bottom:30px;
}

[whisher]

Hi, that's sick :) the only thing it would be cooler using only bootstrap class like a theme +1

On 20 May 2014 22:00, Thomas notifications@github.com wrote:

Reopened #506 https://github.com/linnovate/mean/issues/506.

— Reply to this email directly or view it on GitHubhttps://github.com/linnovate/mean/issues/506#event-123071616 .

[enkodellc]

@pribeh I like your ideas. I have been integrate the SmartAdmin from https://wrapbootstrap.com/themes/admin. I have converted several controls from JQuery to Angular, updated the meanio routes to be more effective for the breadcrumbs as well as allowing for abstract states to create better system for anonymous users, authenticated users and admin users.

[whisher]

Do you use jquery and bootstrap.js ?

On 20 May 2014 22:55, Keith notifications@github.com wrote:

@pribeh https://github.com/pribeh I like your ideas. I have been integrate the SmartAdmin from https://wrapbootstrap.com/themes/admin. I have converted several controls from JQuery to Angular, updated the meanio routes to be more effective for the breadcrumbs as well as allowing for abstract states to create better system for anonymous users, authenticated users and admin users.

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033171/d98e7254-e060-11e3-93a0-b3fddfd7d7c8.png

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033174/e90e37d2-e060-11e3-8fb9-fe31d6aedc6a.png

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033181/0c517f42-e061-11e3-9944-ab69985fc1bd.png

— Reply to this email directly or view it on GitHubhttps://github.com/linnovate/mean/issues/506#issuecomment-43681750 .

[whisher]

btw nice work :)

On 20 May 2014 23:09, Fabio Bedini whisher06@gmail.com wrote:

Do you use jquery and bootstrap.js ?

On 20 May 2014 22:55, Keith notifications@github.com wrote:

@pribeh https://github.com/pribeh I like your ideas. I have been integrate the SmartAdmin from https://wrapbootstrap.com/themes/admin. I have converted several controls from JQuery to Angular, updated the meanio routes to be more effective for the breadcrumbs as well as allowing for abstract states to create better system for anonymous users, authenticated users and admin users.

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033171/d98e7254-e060-11e3-93a0-b3fddfd7d7c8.png

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033174/e90e37d2-e060-11e3-8fb9-fe31d6aedc6a.png

[image: image]https://cloud.githubusercontent.com/assets/2935721/3033181/0c517f42-e061-11e3-9944-ab69985fc1bd.png

— Reply to this email directly or view it on GitHubhttps://github.com/linnovate/mean/issues/506#issuecomment-43681750 .

[enkodellc]

My goal is to only use ui-bootstrap / angular directives instead of jquery. I have gutted most of the jquery but still working on some controls like the table for sorting, paging, filter... might be using ng-grid.

[pribeh]

@whisher I've only tried to provide markup and styling in the departments that bootstrap lacks (mostly teaser & content organization/readability). This was my first stab at it. I'll do another pass to see if there's any more I can do to remove extra styling/markup.

@enkodellc That looks like a big undertaking. Breadcrumbs would be a great addition and the user routes/states stuff sounds interesting. From what I can tell we could certainly streamline the markup and styling of the theme or make an iteration of it that's more minimal. I can certainly help in that department if you want. If I'm not mistaken with your intention, (part of) this 'admin interface' seems like it could be integrated into the mean-admin module or exist as a fork of it. I'm not positive it's better UX design to separate the admin experience from the core authenticated experience (some users find it confusing). But it is hard to create an admin overlay/menu system that integrates well into the varying application designs that developers will use MEAN for. It might make the most sense from a development perspective to cleanly separate the two UI/UX (admin vs anonymous/authenticated). If it makes sense to you maybe we should follow up this conversation over in the mean-admin queue where I already started discussion about these issues: https://github.com/linnovate/mean-admin/issues/2. Or do you have plans to spin this out into its own module already?

[enkodellc]

@pribeh So far it has not been a huge task, most of the functionality built into meanio just needed some tweaking. I am not planning on submitting my UI updates to get into meanio and have only been slowly placing a few pull requests that I have seen make sense into the main branch to support the core functionality. I have been reviewing some of your requested changes in mean-admin but I am currently focused on a package for the scope of the project I am working on. My only plan is to make changes to meanio that I feel will better the project since it has helped me create my first MEAN app.