() translation by (you can also view the original English article)
Tutorial ini adalah bagian dari seri Membangun Startup Anda Dengan PHP pada Envato Tuts+. Dalam seri ini, saya memandu Anda melalui peluncuran startup dari konsep ke realitas menggunakan aplikasi Meeting Planner saya sebagai contoh nyata. Setiap langkah di sepanjang jalan, saya akan merilis kode Perencana Pertemuan sebagai contoh open-source yang dapat Anda pelajari. Saya juga menangani masalah bisnis terkait startup saat muncul.
Aplikasi Seluler vs. Web Responsif
Secara strategis, membangun aplikasi mobile untuk Meeting Planner di iOS dan Android masuk akal, tetapi secara finansial saya belum mengangkat sumber daya untuk ini. Mathew Ingram baru-baru ini menulis di Fortune bahwa karena kebanyakan penawaran untuk pengguna ponsel, "setidaknya secara statistik—tidak ada yang akan mengunduh aplikasi Anda." Jadi, meski tentu saja saya dapat meningkatkan pengalaman Perencana Pertemuan dengan aplikasi, kemungkinan pengadopsiannya tidak langsung masuk akal dengan sumber daya saya saat ini.
Namun, sangat penting untuk menjadikan Meeting Planner pengalaman web yang luar biasa di perangkat seluler.
Dalam episode hari ini, saya akan meninjau dan membahas perubahan yang berorientasi untuk melakukan hal itu—pada dasarnya menjadikan aplikasi web kami lebih sebagai situs web responsif, mudah digunakan di perangkat seluler dan tablet. Lihat hasilnya (di ponsel atau tablet Anda)!
Salah satu tantangan coding untuk episode hari ini adalah bahwa saya bukan seorang desainer atau CSS coder. Beberapa hari aku merasa sepertinya aku bahkan tidak perlu coding sendiri; di Microsoft Saya adalah Manajer Program Grup, yaitu kami memiliki desainer grafis, laboratorium kegunaan yang lengkap, CSS tidak ada, dll.
Memimpin pekerjaan ini, saya merasa terintimidasi mencoba mempelajari kueri media, breakpoint, dan CSS khusus—ini bukan materi yang saya mahasakan, dan ini sangat memakan waktu dan sangat berorientasi pada detail. Namun, dalam waktu 48 jam, semuanya datang dengan cepat dan indah. Jika Anda memindai ke bagian bawah cerita, Anda akan melihat bagaimana beberapa baris CSS pada akhirnya diperlukan untuk semua perubahan. Tiba-tiba ketika saya mulai menelusuri Meeting Planner di ponsel saya, saya semakin bersemangat untuk mengetahui seberapa baik pengalaman web responsif baru ini.
Terus terang, itu membuat saya merasa bahwa aplikasi seluler khusus tidak diperlukan saat ini. Kami dapat membangun pemirsa kami dengan pengalaman web seluler untuk saat ini, terutama melalui fase alpha dan beta mendatang yang penting.
Sementara itu, jika Anda belum mencoba Perencana Pertemuan, lanjutkan dan jadwalkan pertemuan pertama Anda dari ponsel atau tablet. Saya berpartisipasi dalam rangkaian komentar di bawah ini, jadi beri tahu saya tentang pengalaman Anda! Anda juga dapat menghubungi saya di Twitter @reifman. Saya selalu tertarik dengan permintaan fitur baru dan topik tutorial yang disarankan.
Sebagai pengingat, semua kode untuk Perencana Pertemuan ditulis dalam Kerangka Yii2 untuk PHP. Jika Anda ingin mempelajari lebih lanjut tentang Yii2, periksa seri paralel kami, Pemrograman Dengan Yii2.
Status Seluler Saat Ini
Untuk memulai, saya menjelajahi status layanan Perencana Pertemuan saat ini dengan ponsel iOS saya dan mengambil tangkapan layar dari aplikasi awal. Itu tidak buruk, tapi itu tidak bagus. Mari kita tinjau apa yang saya temukan.
Beranda
Halaman beranda terlihat bagus, meskipun secara estetis saya berharap teks utama, "Membuat Penjadwalan Mudah", akan sedikit berbeda, yaitu pada tiga garis panjang yang kira-kira sama. Namun, Bootstrap mengelola menu drop-down dengan baik, dan seluruh halaman berfungsi secara fungsional:
Laman Pendaftaran
Sekali lagi, selain tata letak estetika judul dan konsistensi margin kiri, halaman pendaftaran pada dasarnya berfungsi:
Merencanakan Pertemuan
Setelah orang tersebut mulai merencanakan pertemuan, halaman indeks saat ini perlu perbaikan. Ada terlalu banyak kolom. Subjek dikencangkan. Mungkin informasi yang saya pilih untuk ditampilkan di sini di tempat pertama tidak penting. Dan, tentu saja, opsi perintah tidak terlihat. Halaman tersebut perlu disesuaikan untuk seluler secara lebih signifikan.
Halaman lain berfungsi dengan baik, seperti permintaan pertemuan baru untuk subjek. Namun, pengguna seluler mungkin tidak ingin ditawari bidang textarea untuk mengetik pesan yang lebih panjang yang memperkenalkan rapat:
Menambahkan peserta juga menjadi sedikit disfungsional dengan ekstensi bootstrap yang kami gunakan:
Dan pandangan perencanaan untuk tempat dan waktu mulai rusak. Sekali lagi, desain desktop menawarkan terlalu banyak detail dan terlalu banyak opsi untuk seluler:
Area Lain
Halaman Tempat berfungsi secara fungsional tetapi membutuhkan tata letak tombol yang ditingkatkan. Dan mungkin fungsi ini tidak diperlukan untuk pengguna seluler.
Demikian pula, tab desktop dan tata-letak foto rusak pada seluler. Ini juga perlu dipikirkan kembali:
Mengembangkan Solusi
Tentu saja, ada banyak area di situs yang bisa diperbaiki. Beberapa area perlu dipikirkan kembali untuk seluler, sebagian diminimalkan, dan lainnya hanya disesuaikan secara estetis. Mari kita mulai bekerja.
Pendekatan Berbeda
Saya memiliki cukup banyak pengalaman nol dengan pertanyaan media dan breakpoint ketika saya memulai tugas ini. Selama beberapa hari sebelumnya, saya menunda menyelam ke dalam apa yang saya takutkan adalah rawa yang tidak dikenal. Saya mulai dengan kueri media praktis untuk menggoda editor saya:
1 |
@media only life |
2 |
and (max-energy-level: 60%) |
3 |
and (-caffeine-ratio: 2) { |
4 |
.editorBossperson { |
5 |
available-to:false; |
6 |
visible-to:false; |
7 |
}
|
8 |
}
|
Bercanda membantu memecahkan es mental di kepalaku. Saya selalu tersedia dan terlihat oleh dewa editorial Envato.
Ada sejumlah area yang mulai saya pertimbangkan:
- Menyederhanakan fungsionalitas, terutama dengan proses perencanaan rapat
- Mengidentifikasi informasi penting untuk ditampilkan untuk seluler
- Menyembunyikan beberapa fungsi pada perangkat seluler, seperti elemen, kolom, dan opsi menu
- Bekerja dengan media-query dan breakpoint
- Tetap fokus pada area terpenting untuk rilis alfa
Satu konsep bermanfaat yang terus saya temukan di web adalah "Desain untuk Seluler Pertama." Sayangnya, saya sekolah lama dan tidak melakukan itu. Tapi itu membantu untuk memikirkan kembali setiap halaman dengan tema ini: Ponsel Pertama.
Sebagai contoh, indeks pertemuan dengan empat kolom tabel harus pergi dan membingungkan pada telepon potret.
Saya terus bertanya pada diri sendiri bagaimana saya akan mendesain semua halaman untuk bekerja dari telepon.
Pemanasan Hingga Kueri Media
Menu Drop-Down
Butuh beberapa upaya untuk mengatasi keraguan saya saat menyelam ke dalam CSS yang mendalam. Untuk pemanasan, saya mulai bekerja meminimalkan menu drop-down dan menyederhanakan ruang lingkup fungsi mobile.
Untuk saat ini, saya memutuskan untuk membuat kueri media dasar tunggal untuk perangkat yang lebih kecil dan menggunakannya di seluruh situs. Berikut adalah frontend/site.css:
1 |
/* ----------- mobile displays ----------- */
|
2 |
|
3 |
@media only screen |
4 |
and (min-device-width: 320px) |
5 |
and (max-device-width: 667px) |
6 |
and (-webkit-min-device-pixel-ratio: 2) { |
7 |
/* hides drop down menu items and footer items */
|
8 |
.itemHide,li.menuHide { |
9 |
display:none; |
10 |
visible:false; |
11 |
}
|
Membuat perubahan ternyata relatif sederhana. Untuk setiap item menu yang ingin saya sembunyikan di seluler, saya hanya perlu menambahkan properti CSS, misalnya. menuHide.
Berikut adalah properti menuHide ditambahkan ke /frontend/views/layouts/main.php:
1 |
$menuItems[] = [ |
2 |
'label' => 'Account', |
3 |
'items' => [ |
4 |
[
|
5 |
'label' => Yii::t('frontend','Places'), |
6 |
'url' => ['/place/yours'], |
7 |
'options'=>['class'=>'menuHide'], |
8 |
],
|
9 |
[
|
10 |
'label' => Yii::t('frontend','Friends'), |
11 |
'url' => ['/friend'], |
12 |
'options'=>['class'=>'menuHide'], |
13 |
],
|
14 |
[
|
15 |
'label' => Yii::t('frontend','Profile'), |
16 |
'url' => ['/user-profile'], |
17 |
'options'=>['class'=>'menuHide'], |
18 |
],
|
19 |
[
|
20 |
'label' => Yii::t('frontend','Contact information'), |
21 |
'url' => ['/user-contact'], |
22 |
'options'=>['class'=>'menuHide'], |
23 |
],
|
24 |
[
|
25 |
'label' => Yii::t('frontend','Settings'), |
26 |
'url' => ['/user-setting'], |
27 |
//'options'=>['class'=>'menuHide'],
|
28 |
],
|
29 |
[
|
30 |
'label' => Yii::t('frontend','Reminders'), |
31 |
'url' => ['/reminder'], |
32 |
'options'=>['class'=>'menuHide'], |
33 |
],
|
34 |
[
|
35 |
'label' => Yii::t('frontend','Logout').' (' . \common\components\MiscHelpers::getDisplayName(Yii::$app->user->id) . ')', |
36 |
'url' => ['/site/logout'], |
37 |
'linkOptions' => ['data-method' => 'post'] |
38 |
],
|
39 |
],
|
40 |
];
|
41 |
echo Nav::widget([ |
42 |
'options' => ['class' => 'navbar-nav navbar-right'], |
43 |
'items' => $menuItems, |
44 |
]);
|
Tiba-tiba, menu drop-down memiliki lebih sedikit kerumitan:
Secara bertahap, saya menyadari bahwa menyederhanakan dan mengurangi fungsi di web seluler akan menciptakan pengalaman terbaik. Orang-orang selalu dapat kembali ke desktop mereka untuk mengakses fitur lain, setidaknya untuk saat ini. Ini juga akan menjadi peluang untuk mengumpulkan umpan balik dari orang-orang selama fase alfa dan beta.
Breadcrumbs
Tata letak default Yii termasuk widget breadcrumb yang dimuat melalui komposer dan lebih sulit dikustomisasi. Saya bereksperimen dengan menambahkan CSS untuk menyembunyikan elemen pertama dan pembagi "/" pertama:
Butuh beberapa waktu tetapi membuat saya menyelam lebih dalam ke CSS, misalnya. konten nth-child, dan membangun kepercayaan diri saya:
1 |
/* removes home and / from breadcrumb */
|
2 |
ul.breadcrumb li:first-child, li.tabHide { |
3 |
display:none; |
4 |
visible:false; |
5 |
}
|
6 |
ul.breadcrumb li:nth-child(2)::before { |
7 |
content:''; |
8 |
}
|
Saya tidak tahu bahwa CSS dapat memodifikasi konten.
Inilah hasilnya:
Spasi Tombol Ditingkatkan untuk Ujung Jari
Selanjutnya, saya menambahkan CSS untuk memberikan padding tambahan untuk tombol di ponsel untuk menekan ujung jari agar tidak rentan kesalahan. Misalnya, berikut adalah tombol kirim dan batal pada perangkat desktop:
Ini adalah CSS yang saya gunakan dan mulai menambahkan berbagai tombol dan ikon yang dapat diklik di sekitar situs:
1 |
/* fingertip spacing for buttons */
|
2 |
a.icon-pad { |
3 |
padding: 0 5px 0 2px; |
4 |
}
|
5 |
.button-pad { |
6 |
padding-left:7px; |
7 |
}
|
Inilah bentuknya seperti di seluler—perhatikan padding baru antara Submit dan Cancel:
Pembungkusan Teks Responsif
Menjadikan home page heading, "Scheduling Made Easy," membungkus sebenarnya ternyata memakan waktu sedikit lebih lama. Pada akhirnya, saya menambahkan tag <br /> ke teks dan menyembunyikannya secara default ketika tidak di ponsel. Tetapi saya juga harus menambahkan spasi dalam tag span dengan item itemHide.
1 |
<h1>
|
2 |
<?php echo Yii::t('frontend','Scheduling'); ?> |
3 |
<br class="rwd-break" /> |
4 |
<span class="itemHide"> </span> |
5 |
<?php echo Yii::t('frontend','Made Easy') ?> |
6 |
</h1>
|
Inilah CSS untuk .rwd-break. Ini disembunyikan secara default dan hanya muncul di layar responsif, melanggar teks header seperti yang saya inginkan.
1 |
.rwd-break { |
2 |
display:none; |
3 |
}
|
4 |
/* ----------- mobile displays ----------- */
|
5 |
@media only screen |
6 |
and (min-device-width: 320px) |
7 |
and (max-device-width: 667px) |
8 |
and (-webkit-min-device-pixel-ratio: 2) { |
9 |
...
|
10 |
.rwd-break { |
11 |
display:block; |
12 |
}
|
13 |
}
|
Tanpa spasi span, teks akan pecah tanpa centering yang tepat.
Menyederhanakan Halaman Daftar Rapat
Karena saya pikir "seluler pertama" semakin banyak, saya menyadari bahwa pengguna berbasis telepon tidak memerlukan semua fungsi pada halaman saya. Mereka tidak membutuhkan semua tab, mereka tidak membutuhkan tabel data tentang rapat, dan mereka tidak membutuhkan semua opsi tombol ikon. Bahkan, untuk halaman pertemuan, mereka hanya perlu dapat membuka rapat (mereka dapat membatalkan pertemuan dari halaman tampilan pertemuan itu sendiri).
Saya menggabungkan kolom subjek dan peserta menjadi satu kolom vertikal, dan hasilnya terlihat jauh lebih baik.
Di /frontend/views/meeting/index.php, saya menambahkan .tabHide ke dua dari empat tab:
1 |
<!-- Nav tabs -->
|
2 |
<ul class="nav nav-tabs" role="tablist"> |
3 |
<li class="active"><a href="#planning" role="tab" data-toggle="tab">Planning</a></li> |
4 |
<li ><a href="#upcoming" role="tab" data-toggle="tab">Confirmed</a></li> |
5 |
<li class="tabHide"><a href="#past" role="tab" data-toggle="tab" >Past</a></li> |
6 |
<li class="tabHide"><a href="#canceled" role="tab" data-toggle="tab">Canceled</a></li> |
7 |
</ul>
|
Dan, di /frontend/views/meeting/_grid.php, saya merestrukturisasi kolom untuk menggabungkan subjek dan peserta:
1 |
if ($mode =='upcoming' || $mode =='past') { |
2 |
echo GridView::widget([ |
3 |
'dataProvider' => $dataProvider, |
4 |
//'filterModel' => $searchModel,
|
5 |
'columns' => [ |
6 |
[
|
7 |
'label'=>'Details', |
8 |
'attribute' => 'meeting_type', |
9 |
'format' => 'raw', |
10 |
'value' => function ($model) { |
11 |
// to do - remove legacy code when subject didn't exist
|
12 |
if ($model->subject=='') { |
13 |
return '<div><a href="'.Url::to(['meeting/view', 'id' => $model->id]).'">'.$model->getMeetingHeader().'</a><br /><span class="index-participant">'.$model->getMeetingParticipants($model->id).'</span></div>'; |
14 |
} else { |
15 |
return '<div><a href="'.Url::to(['meeting/view', 'id' => $model->id]).'">'.$model->subject.'</a><br /><span class="index-participant">'.$model->getMeetingParticipants($model->id).'</span></div>'; |
16 |
}
|
17 |
},
|
18 |
],
|
Menyembunyikan ActionColumn memerlukan sedikit riset, tetapi terlihat seperti ini:
1 |
['class' => 'yii\grid\ActionColumn','header'=>'Options','template'=>'{view} {decline} {cancel}', |
2 |
'headerOptions' => ['class' => 'itemHide'], |
3 |
'contentOptions' => ['class' => 'itemHide'], |
4 |
'buttons'=>[ |
5 |
'view' => function ($url, $model) { |
6 |
return Html::a('<span class="glyphicon glyphicon-eye-open"></span>', $url, |
7 |
[
|
8 |
'title' => Yii::t('frontend', 'view'), |
9 |
'class' => 'icon-pad', |
10 |
]);
|
11 |
},
|
12 |
'decline' => function ($url, $model) { |
13 |
return ($model->status==$model::STATUS_SENT ) ? Html::a('<span class="glyphicon glyphicon-thumbs-down"></span>', $url, [ |
14 |
'title' => Yii::t('frontend', 'decline'), |
15 |
'class' => 'icon-pad', |
16 |
]) : ''; |
17 |
},
|
18 |
'cancel' => function ($url, $model) { |
19 |
return ($model->status==$model::STATUS_SENT || $model->status==$model::STATUS_CONFIRMED ) ? Html::a('<span class="glyphicon glyphicon-remove-circle"></span>', $url, [ |
20 |
'title' => Yii::t('frontend', 'cancel'), |
21 |
'data-confirm' => Yii::t('frontend', 'Are you sure you want to cancel this meeting?'), |
22 |
'class' => 'icon-pad', |
23 |
]) : ''; |
24 |
},
|
25 |
]
|
26 |
],
|
Pada akhirnya, perubahan ini menyederhanakan antarmuka desktop dalam proses meningkatkan seluler.
Tantangan Besar: Penjadwalan Pertemuan
Sejauh ini tugas yang paling menantang bagi saya adalah menyesuaikan halaman penjadwalan rapat di atas untuk seluler. Itu berantakan di telepon, dan saya merasa takut. Secara terpisah, saya selalu khawatir bagaimana saya akan mengadopsi antarmuka ini untuk beberapa peserta di masa depan—persyaratan responsif mungkin membuat ini lebih sulit.
Penggunaan saya dari ekstensi Bootstrap Beralih Widget Kartik untuk Yii memiliki keterbatasan tersendiri ketika harus memodifikasi tata letak. Menempatkan elemen-elemen ini dalam kolom tabel bekerja dengan baik, tetapi membuat kolom tabel responsif tidak sesederhana dengan kueri media.
Tentu saja seperti yang saya tunjukkan dengan halaman daftar Rapat di atas, menyembunyikan kolom itu mudah, tetapi memodifikasi penempatannya tidak terlalu banyak.
Saya mulai dengan menjauh dari desain meja horizontal untuk menunjukkan waktu dan pilihan tempat dan menuju gaya potret vertikal. Dan, ternyata, tabel dan kolom memiliki kapasitas sendiri untuk membungkus dengan HTML5 dan CSS tanpa pertanyaan media.
Anda dapat melihat halaman rencana pertemuan yang disempurnakan dan kosong di sini:
Setiap tampilan sebagian membutuhkan kolom css tambahan untuk tata letak Bootstrap yang ditentukan sebelumnya agar berfungsi dengan baik, misalnya. kiri col-xs4 dan col-xs-8 kanan. Inilah contohnya:
1 |
<div class="panel panel-default"> |
2 |
<!-- Default panel contents -->
|
3 |
<div class="panel-heading"> |
4 |
<div class="row"> |
5 |
<div class="col-lg-4 col-md-4 col-xs-4"><h4>What</h4></div> |
6 |
<div class="col-lg-8 col-md-8 col-xs-8"><div style="float:right;"> |
7 |
<?php
|
8 |
if ($isOwner) { |
9 |
echo Html::a('', ['update', 'id' => $model->id], ['class' => 'btn btn-primary glyphicon glyphicon-pencil','title'=>'Edit']); |
10 |
}
|
11 |
?>
|
12 |
</div>
|
13 |
</div>
|
14 |
</div>
|
15 |
</div>
|
Membuat tempat dan jadwal penjadwalan menjadi responsif adalah yang paling sulit. Saya bereksperimen dan akhirnya berhasil menggunakan kolom tabel yang secara alami membungkus saat jendela konten (atau perangkat) menyusut.
Saya juga menghilangkan status peserta di kolomnya sendiri dengan tombol yang dinonaktifkan—Anda tidak dapat mengubahnya, jadi mengapa menampilkannya sebagai tombol? Sebagai gantinya, saya membuat ringkasan tekstual tentang status peserta Anda untuk tempat dan waktu. Berikut kode untuk getWhenStatus():
1 |
public static function getWhenStatus($meeting,$viewer_id) { |
2 |
// get an array of textual status of meeting times for $viewer_id
|
3 |
// Acceptable / Rejected / No response:
|
4 |
$whenStatus['text'] = []; |
5 |
$whenStatus['style'] = []; |
6 |
foreach ($meeting->meetingTimes as $mt) { |
7 |
// build status for each time
|
8 |
$acceptableChoice=[]; |
9 |
$rejectedChoice=[]; |
10 |
$unknownChoice=[]; |
11 |
// to do - add meeting_id to MeetingTimeChoice for sortable queries
|
12 |
foreach ($mt->meetingTimeChoices as $mtc) { |
13 |
if ($mtc->user_id == $viewer_id) continue; |
14 |
switch ($mtc->status) { |
15 |
case MeetingTimeChoice::STATUS_UNKNOWN: |
16 |
$unknownChoice[]=$mtc->user_id; |
17 |
break; |
18 |
case MeetingTimeChoice::STATUS_YES: |
19 |
$acceptableChoice[]=$mtc->user_id; |
20 |
break; |
21 |
case MeetingTimeChoice::STATUS_NO: |
22 |
$rejectedChoice[]=$mtc->user_id; |
23 |
break; |
24 |
}
|
25 |
}
|
26 |
$temp =''; |
27 |
// to do - update for multiple participants
|
28 |
// to do - integrate current setting for this user in style setting
|
29 |
if (count($acceptableChoice)>0) { |
30 |
$temp.='Acceptable to '.MiscHelpers::getDisplayName($acceptableChoice[0]); |
31 |
$whenStatus['style'][$mt->id]='success'; |
32 |
} else if (count($rejectedChoice)>0) { |
33 |
$temp.='Rejected by '.MiscHelpers::getDisplayName($rejectedChoice[0]); |
34 |
$whenStatus['style'][$mt->id]='danger'; |
35 |
} else if (count($unknownChoice)>0) { |
36 |
$temp.='No response from '.MiscHelpers::getDisplayName($unknownChoice[0]); |
37 |
$whenStatus['style'][$mt->id]='warning'; |
38 |
}
|
39 |
$whenStatus['text'][$mt->id]=$temp; |
40 |
}
|
41 |
return $whenStatus; |
42 |
}
|
Inilah tampilannya di desktop—perhatikan tata letak lanskap dari deretan teks dan pengalih:
Dan inilah versi seluler, lebih banyak potret dan ditumpuk tanpa pertanyaan media:
Sebagai contoh, inilah CSS untuk cara saya mengkodekan kolom tabel pada panel When (times):
1 |
table.table-list { |
2 |
width:100%; |
3 |
}
|
4 |
table.table-list td.table-list-first { |
5 |
float: left; |
6 |
display: inline; |
7 |
width: auto; |
8 |
}
|
9 |
table.table-list td.table-switches { |
10 |
width: auto; |
11 |
float: right; |
12 |
display: inline; |
13 |
padding-top: 10px; |
14 |
}
|
15 |
.switch-pad { |
16 |
padding-left:7px; |
17 |
}
|
18 |
.smallStatus { |
19 |
font-size:90%; |
20 |
color: grey; |
21 |
font-style: italic; |
22 |
}
|
Dan inilah kode untuk formulir parsial ini dari /frontend/views/meeting-time/_list.php:
1 |
<?php
|
2 |
use yii\helpers\Html; |
3 |
use frontend\models\Meeting; |
4 |
use \kartik\switchinput\SwitchInput; |
5 |
?>
|
6 |
<tr > <!-- panel row --> |
7 |
<td > |
8 |
<table class="table-list"> <!-- list of times --> |
9 |
<tr>
|
10 |
<td class="table-list-first"> <!-- time & status --> |
11 |
<?= Meeting::friendlyDateFromTimestamp($model->start,$timezone) ?> |
12 |
<?php
|
13 |
if ($whenStatus['text'][$model->id]<>'') { |
14 |
?>
|
15 |
<br /><span class="smallStatus"> |
16 |
<?php
|
17 |
echo $whenStatus['text'][$model->id]; |
18 |
?>
|
19 |
</span><br /> |
20 |
<?php
|
21 |
}
|
22 |
?>
|
23 |
</td>
|
24 |
<td class="table-switches"> <!-- col of switches to float right --> |
25 |
<table > |
26 |
<tr>
|
27 |
<td > |
28 |
<?php
|
29 |
if ($isOwner) { |
30 |
showTimeOwnerStatus($model,$isOwner); |
31 |
} else { |
32 |
showTimeParticipantStatus($model,$isOwner); |
33 |
}
|
34 |
?>
|
35 |
</td>
|
36 |
<td class="switch-pad"> |
37 |
<?php
|
38 |
if ($timeCount>1) { |
39 |
if ($model->status == $model::STATUS_SELECTED) { |
40 |
$value = $model->id; |
41 |
} else { |
42 |
$value = 0; |
43 |
}
|
44 |
if ($isOwner || $participant_choose_date_time) { |
45 |
// value has to match for switch to be on
|
46 |
echo SwitchInput::widget([ |
47 |
'type' => SwitchInput::RADIO, |
48 |
'name' => 'time-chooser', |
49 |
'items' => [ |
50 |
[ 'value' => $model->id], |
51 |
],
|
52 |
'value' => $value, |
53 |
'pluginOptions' => [ 'size' => 'mini','handleWidth'=>60,'onText' => '<i class="glyphicon glyphicon-ok"></i> choose','onColor' => 'success','offText'=>'<i class="glyphicon glyphicon-remove"></i>'], // $whenStatus['style'][$model->id], |
54 |
'labelOptions' => ['style' => 'font-size: 12px'], |
55 |
]);
|
56 |
}
|
57 |
}
|
58 |
?>
|
59 |
</td>
|
60 |
</tr>
|
61 |
</table>
|
62 |
</td> <!-- end col with table of switches --> |
63 |
</tr>
|
64 |
</table> <!-- end table list of times --> |
65 |
</td>
|
66 |
</tr> <!-- end panel row --> |
Hal terbaik tentang perubahan tampilan rapat ini adalah mereka akan menyederhanakan tantangan desain UX untuk pertemuan di masa depan dengan banyak peserta. Terlepas dari jumlah orang yang menghadiri rapat, tampilan pada dasarnya tetap sama seperti di atas. Pada dasarnya, ini memecahkan penghalang terbesar bagi saya meluas ke beberapa pertemuan peserta—desain UX.
Apa berikutnya?
Saya harap Anda menikmati mengikuti ketika saya bekerja pada hal-hal kecil desain web responsif. Karena kode dan perubahan visual pada situs bersatu, saya merasa sangat puas dan terkesan dengan betapa sedikit CSS diperlukan. Jika digabungkan, Anda dapat melihatnya di sini:
1 |
.rwd-break { |
2 |
display:none; |
3 |
}
|
4 |
table.table-list { |
5 |
width:100%; |
6 |
}
|
7 |
table.table-list td.table-list-first { |
8 |
float: left; |
9 |
display: inline; |
10 |
width: auto; |
11 |
}
|
12 |
|
13 |
table.table-list td.table-switches { |
14 |
width: auto; |
15 |
float: right; |
16 |
display: inline; |
17 |
padding-top: 10px; |
18 |
}
|
19 |
.switch-pad { |
20 |
padding-left:7px; |
21 |
}
|
22 |
.smallStatus { |
23 |
font-size:90%; |
24 |
color: grey; |
25 |
font-style: italic; |
26 |
}
|
27 |
.setting-label label, #preferences label { |
28 |
font-weight:normal; |
29 |
}
|
30 |
|
31 |
/* ----------- mobile displays ----------- */
|
32 |
|
33 |
@media only screen |
34 |
and (min-device-width: 320px) |
35 |
and (max-device-width: 667px) |
36 |
and (-webkit-min-device-pixel-ratio: 2) { |
37 |
/* hides drop down menu items and footer items */
|
38 |
.itemHide,li.menuHide { |
39 |
display:none; |
40 |
visible:false; |
41 |
}
|
42 |
/* removes home and / from breadcrumb */
|
43 |
ul.breadcrumb li:first-child, li.tabHide { |
44 |
display:none; |
45 |
visible:false; |
46 |
}
|
47 |
ul.breadcrumb li:nth-child(2)::before { |
48 |
content:''; |
49 |
}
|
50 |
/* fingertip spacing for buttons */
|
51 |
a.icon-pad { |
52 |
padding: 0 5px 0 2px; |
53 |
}
|
54 |
.button-pad { |
55 |
padding-left:7px; |
56 |
}
|
57 |
.rwd-break { |
58 |
display:block; |
59 |
}
|
60 |
}
|
Usaha desain saya di masa depan akan dimulai, "Apa yang terlihat seperti ini di ponsel?"
Seperti disebutkan, saat ini saya sedang bekerja keras untuk mempersiapkan Perencana Pertemuan untuk rilis alfa. Saya terutama berfokus pada peningkatan kunci dan fitur yang akan membuat rilis alpha berjalan lancar.
Saya melacak semuanya di Asana sekarang, yang akan saya tulis di tutorial lain; ini sangat membantu. Ada juga beberapa fitur baru yang menarik yang masih dalam perjalanan.
Saya juga mulai lebih fokus pada upaya pengumpulan investasi yang akan datang dengan Perencana Pertemuan. Saya baru mulai bereksperimen dengan WeFunder berdasarkan implementasi aturan crowdfunding baru SEC. Silakan pertimbangkan mengikuti profil kami. Saya juga akan menulis lebih banyak tentang ini di tutorial selanjutnya.
Sekali lagi, ketika Anda menunggu lebih banyak episode, jadwalkan pertemuan pertama Anda (dari ponsel Anda!). Juga, saya akan menghargai jika Anda berbagi pengalaman Anda di bawah ini di komentar, dan saya selalu tertarik dengan saran Anda. Anda juga dapat menghubungi saya di Twitter @reifman secara langsung. Anda juga dapat mempostingnya di situs dukungan Meeting Planner.
Tonton tutorial yang akan datang dalam seri Membangun Startup Anda Dengan PHP.
Link Terkait
