第4回「入門レベルXコード」「入門レベル」「エンタープライズレベル」コース

第4回「入門レベルXコード」「入門レベル」「エンタープライズレベル」コース
担当部分:Grid実装/Loading Indicatorを作成する
主な機能

「トップタブバー」は、Clickを介して各タブに移動できます.2つのタブ間を移動するときにスライドアニメーションを再生します.

「共有」機能は、新しいウィンドウにコンテンツリンクを表示します.

のCarousel Viewは5秒ごとに移動し、次のコンテンツとしてスライドアニメーション処理を行います.

[その他のビュー]ボタンをクリックすると、すべてのコンテンツがセクタごとにクエリーされます.

グローバルデータ管理を採用しています.

フロントエンドサーバはlocalhost:8888に設定されています.

時間が経つのが早すぎて最後のプロジェクト!今回のプロジェクトでは、負担する部分はさらに大きくない.私はいくつかの短いプロジェクトをして、そこから私が基本的に遠く離れた素子を作るのが得意で、あるいはグリッドの部分全体をつかむのが得意で、興味を持っています.
今回もロードインジケータを作成する過程で,キーフレームや様々な遷移についてより多くの学習を行い,全体のグリッド部分についてもより多くの学習を行った.
コラボレーションはずっと重要ですが、全体の枠組みを作るか詳細な部分だけを先に話すかという観点から、違いが大きく、これも私が学んだ時間です.今回のプロジェクトでは、モバイルで作成した環境のサービスをWebページに作成し、モバイルは設計を参考にすることができますが、Webページ側はチームメンバーとチャットし、どのように配置するかなどを議論する必要があります.
移動する場合は、横が狭く縦が長い形式なので、新しく上がったものと詳細なリストはrow形式であるはずですが、Webの場合は横が長く、縦が短い形式で、この2つの形式がcolumn形式になっています.この過程で、事前に担当チームメンバーに「ダウンジャケットや利益は私が担当するので、仕事中はサイズを100%に抑えてください」と伝えておけば、後で統合する際に調整する時間が減ります.遅ればせながらの覚悟も得られた.これを調整するのに長い時間がかかるか、非常に難しい仕事ではないと思いますが、これは無駄な時間に相当し、結果は無駄になります.
もう1つは、position: firxedはルートを基準としてサイズを決定し、position: absoluteは最近の親要素を基準としてサイズを決定する.

import React from 'react';
import styled from '@emotion/styled';

const LoadingIndicator = () => {
  return (
    <Ring>LOADING
      <span></span>
    </Ring>
  );
};

const Ring = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 15rem;
  height: 15rem;
  background: transparent;
  border: 1rem solid #23a2f7;
  border-radius: 50%;
  text-align: center;
  line-height: 13.5rem;
  font-size: 2rem;
  font-weight: 1000;
  color: #23a2f7;
  letter-spacing: 0.3rem;
  box-shadow: 0 0 2rem rgba(0,0,0,.5);
  text-shadow: 0.2rem 0.2rem 0.2rem lightblue;
  :before {
    content: '';
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 100%;
    height: 100%;
    border: 1rem solid transparent;
    border-top: 1rem solid #002473;
    border-right: 1rem solid #002473;
    border-radius: 50%;
    animation: animateC 3s linear infinite;
}
  span
  {
    display: block;
    position: absolute;
    top: calc(50% - 0.2rem);
    left: 50%;
    width: 50%;
    height: 0.4rem;
    background: transparent;
    transform-origin: left;
    animation: animate 3s linear infinite;
  }
  span:before
  {
    content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #002473;
    top: 0rem;
    right: -1.4rem;
    box-shadow:0 0 2rem #002473;
  }
  @keyframes animateC
  {
    0%
    {
      transform:rotate(0deg);
    }
    100%
    {
      transform:rotate(360deg);
    }
  }
  @keyframes animate
  {
    0%
    {
      transform:rotate(45deg);
    }
    100%
    {
      transform:rotate(405deg);
    }
  }
`

export default LoadingIndicator;

import React from 'react'
import styled from '@emotion/styled'

interface ITemplate {
  children?: React.ReactNode
}

export default function Template({ children }: ITemplate) {
  return (
    <>
      <PageWrapper>{children}</PageWrapper>
    </>
  )
}

const PageWrapper = styled.div`
  margin: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(auto, calc(100vh - 13rem));
  height: 100%;
  grid-gap: 3rem;

  @media (max-width: 768px) {
    display: flex;
    flex-direction: column;
  }
`