Giter Club home page Giter Club logo

eccube-styleguide's Introduction

EC-CUBE 4 スタイルガイド制作

EC-CUBE4デモサイト

http://demo4.ec-cube.net/

開発リポジトリ　

https://github.com/EC-CUBE/Eccube-Styleguide

確認環境[master]

masterブランチにマージされた内容はこちらで確認できます。

master ブランチは最新のタグリリース内容を保持するブランチです。

Styleguide On Heorku

http://eccube3-styleguide.herokuapp.com/

HTML Moc On Heroku

http://eccube3-styleguide.herokuapp.com/moc/

確認環境[dev]

devブランチにマージされた内容はこちらで確認できます。

dev ブランチは開発作業中の内容を取り込む ブランチです。

Styleguide On Heorku

http://eccube3-styleguide-dev.herokuapp.com/

HTML Moc On Heroku

http://eccube3-styleguide-dev.herokuapp.com/moc/

モックページの実装状況等は、Project ページを確認してください。

https://github.com/EC-CUBE/Eccube-Styleguide/projects

リリース作業の進め方

リリースに関するタスク管理は、全てissueで管理します。

issue は dev等ブランチにマージされたタイミングで close します。

dev / master ブランチにUPされたタイミングで上記確認環境にDeployされますので、確認が可能です。

タグのリリース

dev 宛のPRは全て Squash マージで行います。

dev -> master へのPR を以てリリースとし、マージとともにリリースタグを発行します。

作業環境の構築

必要モジュールのインストール

$ npm i

ビルド

$ npm run build

スタイルガイド制作用開発サーバの起動

$ npm start

スタイルガイドのpug

pugcache.jsonファイルごと削除

モック制作用開発サーバの起動

$ npm run dev

アイコンを表示させる

$ npm run build:moc

eccube-styleguide's People

Contributors

chihiro-adachi avatar dependabot[bot] avatar masumikondo avatar mikakane avatar nanasess avatar okazy avatar ryo-endo avatar takashi0602 avatar tao-s avatar tyokinuhata avatar unilorn avatar yasui05821 avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

unilorn yasui05821 tyokinuhata okazy chihiro-adachi k-yamamura yuhonghong66 tao-s metastable ruihhh nanasess ysaito8015

eccube-styleguide's Issues

改善要望

[prefer] ロゴのセンタリング 👍 ：後藤さん対応済み

完全に画面**に置きたい
カートナビがあろうがなかろうがContainer **への配置として、
カートナビを 浮かせる。

[prefer] 商品一覧のあまりの表示

４retu表示の余りなどを 端ではなく**に。
modiで justify-content: center;　verを作る

その他

  • スマホのメニューをFixed で固定する
  • 右下のページトップへ：新規で作る

ブロック管理の定義方法について検討

デザインに直接的には関係ないが、EC-CUBE本体ではページレイアウト管理という仕組みを利用して、
フロント画面を構成している。

今後、defualt_frame.twigに対してブロックの定義を行うときには下記のどのパターンを採用すれば、
大きくデザインがずれることなく利用可能か検討する必要あり。

たとえば、ヘッダーの場合

<div class="ec-layoutRole__header">
    <div class="ec-headerRole">
        {# ▼HeaderInternal COLUMN #}
        {% if PageLayout.Header %}
            {# ▼上ナビ #}
            {{ include('block.twig', {'Blocks': PageLayout.Header}) }}
            {# ▲上ナビ #}
        {% endif %}
        {# ▲HeaderInternal COLUMN #}
    <div class="ec-layoutRole__header">
<div class="ec-headerRole">

とするのか、

{# ▼HeaderInternal COLUMN #}
    {% if PageLayout.Header %}
        {# ▼上ナビ #}
        <div class="ec-layoutRole__header">
            <div class="ec-headerRole">
                {{ include('block.twig', {'Blocks': PageLayout.Header}) }}
            <div class="ec-layoutRole__header">
        <div class="ec-headerRole">
        {# ▲上ナビ #}
    {% endif %}
{# ▲HeaderInternal COLUMN #}

となるのか、そもそも

{# ▼HeaderInternal COLUMN #}
    {% if PageLayout.Header %}
        {# ▼上ナビ #}
            {{ include('block.twig', {'Blocks': PageLayout.Header}) }}
        {# ▲上ナビ #}
    {% endif %}
{# ▲HeaderInternal COLUMN #}

と定義自体だけにしておいて、タグはブロック内部で記述させるのか検討する必要がある。

また、フッターであれば、defualt_frame.twigには

<div class="ec-layoutRole__footer">
    {# ▼Footer COLUMN#}
    {% if PageLayout.Footer %}
        {# ▼上ナビ #}
        {{ include('block.twig', {'Blocks': PageLayout.Footer}) }}
        {# ▲上ナビ #}
    {% endif %}
    {# ▲Footer COLUMN#}
</div>

{# ▼Footer COLUMN#}
{% if PageLayout.Footer %}
    {# ▼上ナビ #}
    <div class="ec-layoutRole__footer">
    {{ include('block.twig', {'Blocks': PageLayout.Footer}) }}
    {# ▲上ナビ #}
    </div>
{% endif %}
{# ▲Footer COLUMN#}

{# ▼Footer COLUMN#}
{% if PageLayout.Footer %}
    {# ▼上ナビ #}
    {{ include('block.twig', {'Blocks': PageLayout.Footer}) }}
    {# ▲上ナビ #}
{% endif %}
{# ▲Footer COLUMN#}

を検討する必要がある。

他にもcontents_topやmain_top等々。

関連
EC-CUBE/ec-cube#1438
EC-CUBE/ec-cube#1712

新スタイルガイドを適用させたpull requestです。
EC-CUBE/ec-cube#2260

[TOPページ]グリッドレイアウト部分のCSSを統一させたい

新入荷商品特集以下
上から、
.ec-grid3 (float)
.ec-displayC (flexbox)
.ec-grid3 (float)
.ec-displayD (flexbox)

このままでは余白を合わせる(縦のラインをあわせる)のが困難になりそうなので、
どちらかに統一したほうがいいと思います。

なお、floatに合わせるのであれば、これらの場所の場合、要素の高さを揃えるJSを読み込ませておくのが良いかもしれません。

ヘッダー内の検索エリア

  • 検索エリアselectとinputがカラム落ちする（画面幅768px～925px時に再現します）
  • ここだけ他とフォントが違う（メイリオ？）

いずれもchromeで確認

ブロック単位で横並びする方法について

ブロックを配置するときに、利用者によってはブロック単位で横並びさせたいという要望が発生することがある。

現在のグリッドだと、

<div class="ec-grid2">
  <div class="ec-grid2__cell">.ec-grid2__cell</div>
  <div class="ec-grid2__cell">.ec-grid2__cell</div>
</div>

というようにec-gridxxで囲む必要があるが、
ブロック単位で横並びしたければレイアウトの定義時代を<div class="ec-grid2">で囲む必要がある。

<div class="ec-layoutRole__footer">
  <div class="ec-grid2">
    {# ▼Footer COLUMN#}
    {% if PageLayout.Footer %}
        {# ▼上ナビ #}
        {{ include('block.twig', {'Blocks': PageLayout.Footer}) }}
        {# ▲上ナビ #}
    {% endif %}
    {# ▲Footer COLUMN#}
    </div>
</div>

何か良い実現方法があるのか。

実現方法が無ければ1つのブロックで作成すれば対応可能のため、EC-CUBE3としては仕様扱いとする。

改善要望：エラーメッセージのクラスの共通化

会員登録画面のように、
http://eccube3-styleguide.herokuapp.com/moc/guest/register/error/

入力フォームのエラーメッセージでは

<div class="ec-input">
  <input type="text">
  <p class="errorMail">同じメールアドレスを入力してください。</p>
</div>

のerrorMailのように、項目ごとにクラスが定義さてれいますが、エラー時のクラスは共通化できないでしょうか。

{{ form_errors(form.email.first) }}

で出力するので、どの項目のエラーも

<p class="error">同じメールアドレスを入力してください。</p>

のように出力できれば助かります。

3階層以上のカテゴリ表示の方法について

2階層までなら、

    <ul class="ec-itemNav">
      <li class="ec-itemNav__item"><a href="/moc/guest/search">新入荷</a>
      </li>
      <li class="ec-itemNav__item"><a href="/moc/guest/search">キッチンツール</a>
        <ul class="ec-itemNavAccordion">
          <li class="ec-itemNavAccordion__item"><a href="/moc/guest/search">キッチン小物</a></li>
          <li class="ec-itemNavAccordion__item"><a href="/moc/guest/search">調理器具</a></li>
          <li class="ec-itemNavAccordion__item"><a href="/moc/guest/search">食器</a></li>
        </ul>
      </li>
      <li class="ec-itemNav__item"><a href="/moc/guest/search">インテリア</a>
      </li>
      <li class="ec-itemNav__item"><a href="/moc/guest/search">照明</a>
      </li>
      <li class="ec-itemNav__item"><a href="/moc/guest/search">雑貨・小物</a>
      </li>
      <li class="ec-itemNav__item"><a href="/moc/guest/search">お買い得品</a>
      </li>
    </ul>
  </div>

で対応可能だが、3階層あるときの表示の方法を確認する。

トップページ

http://eccube3-styleguide.herokuapp.com/moc/

  • カルーセル
  • カート部JS実装
  • 新着情報アコーディオン transition 実装
  • 新着情報 画面幅 950 px 程度でアイコンが落ちる問題
  • スライダー部下、新入荷商品特集の箇所 コンテナに沿わせる。
  • "足の透かし模様が美しいミニテーブル" 箇所のパディング整える
  • レスポンシブ時の新着情報
  • 下の写真が12個並ぶブロック　レスポンシブ対応
  • SP 版の Slide Navi transition対応

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.