twin-te / twinte-front Goto Github PK
View Code? Open in Web Editor NEWTwin:te フロントエンド
Home Page: https://app.twinte.net
License: MIT License
Twin:te フロントエンド
Home Page: https://app.twinte.net
License: MIT License
ブラウザに備わっている文字サイズを変える機能のような感じで、アプリでもユーザーが自由に文字サイズを変えられるようにしたい
可読性を上げる
ノーマル(今の大きさ)、120%、140%とか3段階くらいあると便利そう…?
ただあまり大きくすると時間割に入り切らなくなったりレイアウトが崩壊したりしそうなので、他の部分の調整もあわせて必要になるかもしれないです。
font-sizeを変えた属性を付けたり外したりすれば出来そうな予感がする
シラバスを見れる授業があまりない。(coinsだけ??)
悲しい
lecture_codeの有無で表示非表示を判定しているせいで、カスタム授業を作成しても見えない(クリックすると、詳細を見ることはできる)
表示非表示判定はuser_lecture_idでやるべき
カスタム授業追加の前準備
components/app-table-contents.vueの表示判定が現在lecture_codeになっているため、user_lecture_idに変更する
4
CSVの追加を押すと全てのファイルを選べてしまう。
そのため、iOS版では「Take Photo or Video」が出てきて押すとクラッシュする。
これによりiOS版がリジェクトされる。
CSVのみを選べるようにするか、iOSではCSVファイルを追加ボタンを消すかの対策を取る必要がある。
Twins「から」インポート
のタイポです
Twitterで言及されてた内容
科目詳細ダイアログの編集モードを保存した時や、ダイアログを閉じた時に通常モードに戻す。
教室情報が前のが表示されて困る。
オフに切り替える状態をコードに追記していなかった
変更ファイルは、詳細ダイアログなので、
components/def-dialog-details.vue
editみたいな変数で、モード切り替えを実装していた筈なので、
ダイアログを閉じたときと保存した時にedit=falseを追加するだけ
間違えてログアウトする可能性がある。
その他はユーザーの要望。
授業検索でキーワード入力後、エンターを押したらキーボードは引っ込んでほしい
UX向上
授業検索でキーワード入力後、エンターを押したらキーボードは引っ込んでほしい
#44 概要
文字のサイズが小さい
可読性が下がる
以前のverに比べて文字サイズを小さくしたため
(ただ、以前とはデザインが変わっており、また文字サイズを大きくするとその分行間や余白が狭くなるため、見やすさを考慮するとある程度しか変えられないかもしれません。できる限り調整してみます。)
font-sizeを変更する
Androidアプリ実行時のみ、「設定」メニューを追加してほしい
Androidアプリ実行時のみ、サイドメニューに「設定」メニューを追加してほしい。
(フロントでも設定画面を追加する予定があるなら「Androidアプリの設定」とかにしといたほうが良い?)
AndroidWebViewからグローバルなオブジェクト android
を注入するので
typeof android !== "undefined"
で設定メニューを出すかを判定android.openSettings()
を実行するPOST
/user-lectures/
PUT
/timetables/{year}/{module}/{day}/{period}
の2つを使えばできることが確認できている
カスタム授業がほしい。
def-dialog-addのカスタム授業のコメントアウトを外してそこから新たなUIを表示(まだ作成されていない)
追加ボタンを押したら↑のAPIを順に(非同期に)たたき、追加できたら、「追加しました」のダイアログを出す
4
検索ボタンの位置を修正したときに検索フォームの全てのpaddingを0にしてしまったため、検索ワードを打ち込んだときの左paddingも0になっている
見た目が不格好
検索ボタンの位置を修正したときに検索フォームの全てのpaddingを0にしてしまったため
paddingを追加する
Sweetalert2を採用しています。
複雑なオプションも記述できるため、tsコードの肥大化に繋がります。
plugins/swal.tsに文章などをまとめると、呼び出しやすいと思います
tsコードを見やすくする
Swal.fire
またはSwal.mixin
とコード検索するといろいろなアラートコードが出てくる。twinte-front/src/components/app-day.vue
Line 28 in a0d9736
ログイン時にダイアログの外をクリックするとGoogleに飛ばされるバグ
どっかのNuxtプロジェクトみたいに、Docker使おうぜ
どっかのサーバーとうまくつながった開発環境を整える
どっかのtokyo-metropolitan-gov/covid19
がシンプル
nodeを使わなくて済むぐらいの改善しかないが
通年実施の講義が表示されない
通年の講義を追加しても時間割に表示されない
困ります!
moduleが通年の講義が無視されている
moduleが通年の講義は全moduleで表示する
検索画面でのエラー
原因不明
「コミュニティ」で検索
原因を見つけて消す
現在の状態ではtemplateにbuttonなどを直打ちしている。
これは宣言的UIを採用しているvuejsに申し訳ない
atomicデザインシステムを部分的に採用することで、新たなUIを作成するときにそれらを使い回せて嬉しい。
コンポネントのcssスタイルをできるだけ減らしたほうが分かりやすいだろう。
時間があるときにatomコンポネントごとにissueを立てたい
2
自分の環境だとデコレータが使えない
動作確認してほしいです
検索ボックスをタップすると勝手にズームしてしまう(iPhone8以前のみ?)
検索ボックスをタップする
手動でもとに戻す必要がある
inputのtext-sizeが16px以下だと勝手にズームする仕様になっている。
text-sizeが何故かvh指定なので、デバイスによってズームしてしまうことがある
サイズ指定を絶対値にするか
https://qiita.com/skwbr/items/b285cc312587c73a4812
等でごまかす
ログイン画面にSign in with Appleを追加する
Sign in with Apple がないとiOS版の審査が通らない
ログイン画面にSign in with Appleボタンを追加
デザインはApple側から指定されているので注意
処理はバックエンドで行われるので、フロントはボタンの追加で大丈夫
ボタンの宛先はバックエンドのURLなので @SIY1121 に聞いて欲しいです
科目検索結果のチェックボックスやadd fileボタンがデフォルトUIになっている
見た目が不恰好
カラーテーマを変更できるようにしたい。
figmaで完全なダークテーマが作成されていない
設定項目を追加する必要が出てくるかも
現代的アプリケーションっぽく
いろんな色があったらうれしい
参考 - マテリアルデザインのダークテーマガイドライン
https://material.io/design/color/dark-theme.html
通知機能、ウィジェット機能等を搭載する場合に、リンクから直接ダイアログが開いた状態にできればとても嬉しい
https://app.twinte.net?user_lecture_id="jcaoioa88969ca67"みたいな感じ
アクセスをしやすくする
授業をタップしたあと、他の授業をタップするとじゃっかん前にタップした授業の詳細が表示される。
また、メモもその授業のものが出てくるまで時間がかかる。
授業をタップしたあと、他の授業をタップする。
あれ???となります
Twinsからインポートを押すと全データ削除のダイアログが出てしまう
Twinsからインポートを押す
ヤバい
switchの中で break;
が抜けてます
break;
を挿入する
選択ボタンをもっと使いやすく?
UX向上
学期の横側の空白部分もSVGのブロックが入るように調節する。
2
DayとModuleがimportできない
コードを綺麗にする
@nuxt/[email protected] & @nuxt/[email protected]
コードを簡潔にする
1.アップデートを行う
2.
if(){
code
}
のようなnullチェックを ?.
に書き換えられるところは直していく
参考
https://qiita.com/niwasawa/items/e0dee419d465c0681e73
https://qiita.com/simochee/items/a2eca2ea8761409889be
iPad等一部の端末でサイドメニューの文字が下段に落ちる
設定からメニューを開き、vwをいじると崩れる部分がある
見た目が良くない
左padingを%指定していたため
null処理
時間割内に背景色がない科目がある
科目番号の上1桁が4以上の数字から始まる授業を時間割に登録する
空きコマとの差別化ができていない
授業の背景色を指定しているswitch文の指定外の科目番号だと、背景色がなくなってしまうため
components/ui-subjectで、switchの分岐に登録されていない科目番号を追記する
ラジオボタンは基本的に1つしか選択できないもの(という固定概念?がある)なので、てっきり一つしか選択できないものだと誤解を与えてしまう可能性がある。
利用者に複数選択(科目番号,担当教員,教室名)できることを明確にさせる。
ラジオボタンではなく、チェックボックスにしてはどうでしょうか。
利用者からの声があったのでissueを立てときます。
検討のほどよろしくお願いします。
/src/static/icon.pngの画像の修正
「文字サイズ変更機能を実装するのであれば、教室や授業番号の表示/非表示を切り替えられると良い」という意見をもらいました。特に授業番号は非表示で、そのぶん文字を大きくしたり長い授業名を表示させた方がいいという人はそこそこいそう・・・?
表示の最適化
教室と授業番号、できれば教員名も表示/非表示を設定できるようにする
PUT
/user-lectures/{user_lecture_id}
で教室の他に授業名も変えられるので変えられるようにしたい
要望
4
ユーザーが自由に教室変更をできるようにする
アプリいっぱいにアイコンがあるのはガイドラインてきに良くないっぽい
80%が理想(20%は余白)
やるなら早めがいい
なんかのガイドラインに書いてあったから
static/icon.pngの画像を差し替える
Web版でCSVを追加すると,チェックボックスを一つ一つつけなければ授業を追加できない
一括追加ボタンを追加する
または,インポートした際チェック済みを初期値とする
ローカルストレージにデータあると嬉しい
いらなかったらこのイシューは消す
オフラインでも使える。
読み込み時間が短縮する?
・端末によって左上のカレンダーの見た目が違う。
・splitviewで幅を狭めていった時、学期選択部のwidthに収まらなくなった文字が下段へ落ちる
等、画面サイズによってレイアウトが崩れてしまっているようなので、できる限り多くの端末でデザインを保ちたい
iPadやレスポンシブモードで画面の幅をいじって表示させる
見た目が良くない、可読性が下がる
cssのwidthや文字サイズの指定において、画面サイズに依存する方法をとったため
widthやfont-sizeを修正
🤷♂️
4
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.