360 lines
13 KiB
HTML
360 lines
13 KiB
HTML
<!--View Information-->
|
||
<!--View name : NEWS Feed-->
|
||
<!--State name : app.newsFeed-->
|
||
<!--URL : #app/newsFeed-->
|
||
|
||
<ion-view title="NEWS">
|
||
<!--news feed section-->
|
||
<ion-content id="news-feed-content">
|
||
|
||
<div class="news-item">
|
||
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
John Smith
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
1 hours ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Material is the metaphor
|
||
</h1>
|
||
|
||
<p class="content">
|
||
A material metaphor is the unifying theory of a rationalized space and a system of motion. The
|
||
material is grounded in tactile reality, inspired by the study of paper and ink, yet
|
||
technologically advanced and open to imagination and magic.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://google.com/design/spec/material-design/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="news-item">
|
||
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/app_icon.png" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
Ionic Blog
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
3 hours ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Pushing the Limits: New Push Features
|
||
</h1>
|
||
|
||
<p class="content">
|
||
When our Platform team last checked in with you, we’d sent a few hundred thousand push
|
||
notifications during our alpha. Now, we’ve sent over a million! That’s a 200% increase each
|
||
month! We’re getting real validation for the Ionic Platform, and the excitement among the team
|
||
here at Ionic cannot be overstated. That said, we can’t take all the credit.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://blog.ionic.io/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div><!--end detail section-->
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="news-item">
|
||
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
John Smith
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
5 hours ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Material design Goals
|
||
</h1>
|
||
|
||
<p class="content">
|
||
Create a visual language that synthesizes classic principles of good design with the innovation
|
||
and possibility of technology and science.
|
||
|
||
Develop a single underlying system that allows for a unified experience across platforms and
|
||
device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all
|
||
first-class input methods.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://google.com/design/spec/material-design/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div><!--end detail section-->
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="news-item">
|
||
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/app_icon.png" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
Ionic Blog
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
9 hours ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Ionic’s First Hack Day!
|
||
</h1>
|
||
|
||
<p class="content">
|
||
On Friday, we held our first-ever Ionic Hack Day. Everyone was encouraged to take the entire day
|
||
to work on a project of interest that could be related, or not, to Ionic.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://blog.ionic.io/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div><!--end detail section-->
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="news-item">
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/app_icon.png" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
Ionic Blog
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
20 hours ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Web Developers Will Rule The World
|
||
</h1>
|
||
|
||
<p class="content">
|
||
I’m a strong believer that companies truly hit their stride once they know exactly who their
|
||
target user is, and how that user fits into the higher purpose of the company.
|
||
|
||
Recently, we’ve found and embraced ours: Ionic empowers web developers to build compelling
|
||
mobile apps without having to change careers. That’s it. That’s why we exist.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://blog.ionic.io/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div><!--end detail section-->
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="news-item">
|
||
|
||
<!--header section-->
|
||
<div class="row header">
|
||
<div class="col-20">
|
||
<img src="img/profileAvatar.jpg" class="user-img"/>
|
||
</div>
|
||
<div class="col-80">
|
||
<span class="name">
|
||
John Smith
|
||
</span>
|
||
<br/>
|
||
<span class="datetime">
|
||
1 day ago
|
||
</span>
|
||
</div>
|
||
</div><!--end header section-->
|
||
|
||
<!--detail section-->
|
||
<div class="row detail">
|
||
<div class="col">
|
||
<h1>
|
||
Material design
|
||
</h1>
|
||
|
||
<p class="content">
|
||
We challenged ourselves to create a visual language for our users that synthesizes the classic
|
||
principles of good design with the innovation and possibility of technology and science. This is
|
||
material design. This spec is a living document that will be updated as we continue to develop
|
||
the tenets and specifics of material design.
|
||
</p>
|
||
|
||
<p class="content">
|
||
http://google.com/design/spec/material-design/
|
||
</p>
|
||
|
||
<p class="tags">
|
||
<i class="fa fa-tags"></i> Material Design, Ionic
|
||
</p>
|
||
</div>
|
||
</div><!--end detail section-->
|
||
|
||
<!--footer section-->
|
||
<div class="row footer">
|
||
<div class="col-33">
|
||
<span class="number">10.9k</span> <span class="wording">Likes</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">20k</span> <span class="wording">Comments</span>
|
||
</div>
|
||
<div class="col-33">
|
||
<span class="number">1k</span> <span class="wording">Shared</span>
|
||
</div>
|
||
</div><!--end footer section-->
|
||
|
||
</div>
|
||
|
||
<div class="row"></div>
|
||
</ion-content><!--end news feed section-->
|
||
|
||
<!--button section-->
|
||
<div class="footer-fab-bar">
|
||
<a class="md-button md-accent md-fab fab-footer" aria-label="Add">
|
||
<i class="ion ion-plus"></i>
|
||
</a>
|
||
</div><!--end button section-->
|
||
</ion-view> |