import"bootstrap"

const{environment}=require('@rails/webpacker')constwebpack=require("webpack")environment.plugins.append("Provide",newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery',Popper:['popper.js','default']}))module.exports=environment

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require bootstrap 
 *= require_tree .
 *= require_self
 */

@import'bootstrap/dist/css/bootstrap';

<divalign="center"><%= will_paginate %>
</div>
<% @article.each do |article| %>
  <% @num +=1%><divclass="row"><divclass="col-xs-8 col-xs-offset-2"><divclass="well well-lg"><divclass="pic"style="<%= "background-image:url('https://source.unsplash.com/1000x80" + "#{@num}" %>" fluid alt="Fluid image');">
          <div class="screen-left"></div>
          <div class="screen-right"></div>
          <div class="fontscenter">
            <h1>
              <%= link_to article.title, article_path(article) %>
            </h1>
            <p>
              <%= truncate(article.description, length: 100) %>
              <p>
                <%# user and article are associated in models and you can write "article.user_id" to like "article.user" on rails below the code %>
                <small>Created by: <%= article.user.username if article.user %>,
                      <%= time_ago_in_words(article.created_at) %> ago,
                      last updated: <%= time_ago_in_words(article.updated_at) %> ago</small>
              </p>
            </p>
          </div>
        </div>
        <% if article.categories.any? %>
          <p>Categories: <%= render article.categories %></p>
        <% end %>
        <% if logged_in? && (current_user == article.user || current_user.admin?) %>
          <div class="article-actions">
            <%= link_to "Editthisarticle", edit_article_path(article), class: "btnbtn-xsbtn-primary" %>
            <%= link_to "Deletethisarticle", article_path(article), method: :delete,
                                                data: {confirm: "Areyousureyouwanttodeletethearticle?"},
                                                class: "btnbtn-xsbtn-danger" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
<% end %>
<div align="center">
<%= will_paginate %>
</div>

.container{width:960px;margin:0auto;}.container:after{clear:both;display:table;content:'';}.bg-pic{width:100%;height:500px;margin:20px;background-color:white;float:left;cursor:pointer;box-shadow:3px3px5px0pxrgba(0,0,0,0.5);}.pic{width:100%;height:500px;position:relative;overflow:hidden;background-color:#102B46;}.fonts{background-color:rgba(0,0,0,0.5);width:100%;height:500px;padding:10px;top:0;left:0;font-family:georgia;color:#fff;opacity:0;transition:opacity.8s;}.fontsh1{margin-top:100px;margin-bottom:40px;}.fontsp{font-size:14px;font-style:italic;text-align:center;line-height:20px;}.pic:hover.fonts{opacity:1;transition:opacity.2s.3s;}.picdiv{position:absolute;}/* screen open and close */.screen-right,.screen-left{width:50%;height:inherit;background-color:#000;top:0;transition:all.3s;}.screen-right{left:100%;}.screen-left{right:100%;}.pic:hover.screen-right{transition:all.3s;left:50%;}.pic:hover.screen-left{transition:all.3s;right:50%;}

defindex@articles=Article.paginate(page: params[:page],per_page: 5)@num=0end