Skip to content

Commit fd7e3fb

Browse files
nanophatenanophate
committed
Fix design to support mobile
1 parent eaf1e5b commit fd7e3fb

File tree

3 files changed

+139
-256
lines changed

3 files changed

+139
-256
lines changed

‎app/views/custom_widget/show.html.erb

Lines changed: 60 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
<header class="title">
1+
<div class="title text-center full-width">
22
<i class="cd cd-logo"></i>
33
<h1>CoderDojo Japan</h1>
44
<p>子どものためのプログラミング道場</p>
5-
</header>
6-
<section class="cover">
5+
<br />
6+
</div>
7+
<section class="cover full-width">
78
<img src="/img/coderdojo-japan_cover.jpg">
89
</section>
9-
<section>
10+
<section class="introduction text-center list">
1011
<p>CoderDojo は7〜17歳の子どもを対象にしたプログラミング道場です。2011年にアイルランドで始まり、世界では66カ国・1,150の道場、日本では全国に67以上の道場があります (2016年12月現在)。</p>
1112
<p>各道場では、主に次のような内容を学ぶことができます。</p>
1213
<ul>
@@ -16,39 +17,13 @@
1617
</ul>
1718
<br />
1819
<p>各道場で学べる内容はそれぞれ異なりますが、CoderDojo の雰囲気は一様です。「どんな雰囲気か知りたい」という方は、下記のガイダンス資料をご参考にしてください。</p>
19-
<iframe src="//www.slideshare.net/slideshow/embed_code/key/FAXoW4pBq172mQ" width="595" height="388" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
20-
<div style="margin-bottom:5px">スライドが見えない場合は<strong><a href="//www.slideshare.net/togazo/coderdojo-introduction-jp" title="CoderDojoガイダンス（最新版）" target="_blank">コチラ</a></strong>から閲覧してください</div>
21-
20+
<div class="text-center">
21+
<iframe src="//www.slideshare.net/slideshow/embed_code/key/FAXoW4pBq172mQ" width="595" height="388" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
22+
<div style="margin-bottom:5px">スライドが見えない場合は<strong><a href="//www.slideshare.net/togazo/coderdojo-introduction-jp" title="CoderDojoガイダンス（最新版）" target="_blank">コチラ</a></strong>から閲覧してください</div>
23+
</div>
2224
<p style="margin-top:10px;">さらに詳しい道場の様子については、「<a href="http://bakemono.jp/reading/blog/web/2256/">CoderDojoとは? 運営者に話を聞いてみた!</a> (バケモノ.jp)」や「<a href="http://ict-enews.net/zoomin/17coderdojo/">子どものための無料プログラミング道場 CoderDojo をはじめてみませんか</a> (ICT教育ニュース)」を読んでみてください。それぞれインタビュー形式で話が構成されているので、より具体的なイメージが掴めるかなと思います :)</p>
2325
</section>
24-
<!--
25-
<section class="meetup" ng-controller="MeetupController as meetup">
26-
<h2>近日の道場</h2>
27-
<ul ng-if="loaded">
28-
<li class="meetup-item" ng-repeat="event in upcomings">
29-
<header>
30-
<a ng-href="http://www.facebook.com/events/{{ event.source }}/">
31-
<img ng-src="{{ event.cover_source }}">
32-
<time>{{ event.start_time | date : 'M/d' }}</time>
33-
</a>
34-
<ul class="meetup-item-mentors">
35-
<li ng-repeat="mentor_id in event.mentors"><img ng-src="http://graph.facebook.com/{{ mentor_id }}/picture?type=square"></li>
36-
</ul>
37-
</header>
38-
<h3><a ng-href="http://www.facebook.com/events/{{ event.source }}/">{{ event.name }}</a></h3>
39-
<ul class="meetup-item-props">
40-
<li><i class="cd cd-clock"></i>{{ event.start_time | date : 'H:mm' }} - {{ event.end_time | date : 'H:mm' }}</li>
41-
<li><a ng-href="http://www.facebook.com/{{ event.venue_id }}"><i class="cd cd-pin"></i>{{ event.location }}</a></li>
42-
</ul>
43-
<ul class="tags">
44-
<li ng-repeat="tag in event.tags">{{ tag }}</li>
45-
</ul>
46-
</li>
47-
</ul>
48-
<div class="spinner" ng-if="!loaded">イベント情報を読み込み中...</div>
49-
</section>
50-
-->
51-
<section class="mentor" ng-controller="MentorController as mctrl">
26+
<section class="mentor text-center full-width grayscale-bg" ng-controller="MentorController as mctrl">
5227
<h2>全国の道場</h2>
5328
<ul ng-if="loaded">
5429
<li class="mentor-person" ng-repeat="mentor in mentors">
@@ -67,61 +42,62 @@
6742
<div class="spinner" ng-if="!loaded">道場情報を読み込み中...</div>
6843
</section>
6944

70-
<section>
45+
<section class="text-center">
7146
<a class="twitter-timeline" href="https://twitter.com/search?q=dojocon%20OR%20coderdojo%20OR%20%E3%82%B3%E3%83%BC%E3%83%80%E3%83%BC%E9%81%93%E5%A0%B4%20OR%20%22Coder%20Dojo%22%20OR%20%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E9%81%93%E5%A0%B4%20lang%3Aja" data-partner="tweetdeck"data-widget-id="770838874780119041">CoderDojoに関するつぶやき</a>
7247
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
7348
</section>
49+
<div class="full-width grayscale-bg">
50+
<section class="detail-introduction list">
51+
<h2 class="text-center">CoderDojo をもっと知りたい</h2>
52+
<p>下記ウェブサイトから、より詳細な情報や、最新の情報にアクセスできます。</p>
53+
<ul>
54+
<li><a href="https://coderdojo.com/">CoderDojo (英語)</a></li>
55+
<li><a href="https://www.facebook.com/groups/coderdojo.jp">CoderDojo Japan (Facebook)</a></li>
56+
<li><a href="http://kata.coderdojo.com/wiki/KataJapan">CoderDojo Kata (Wiki)</a></li>
57+
</ul>
58+
<br/>
7459

75-
<section>
76-
<h2>CoderDojo をもっと知りたい</h2>
77-
<p>下記ウェブサイトから、より詳細な情報や、最新の情報にアクセスできます。</p>
78-
<ul>
79-
<li><a href="https://coderdojo.com/">CoderDojo (英語)</a></li>
80-
<li><a href="https://www.facebook.com/groups/coderdojo.jp">CoderDojo Japan (Facebook)</a></li>
81-
<li><a href="http://kata.coderdojo.com/wiki/KataJapan">CoderDojo Kata (Wiki)</a></li>
82-
</ul>
83-
<br/>
84-
85-
<p>本家サイトである CoderDojo (英語) では世界中の活動の様子が見れます。また、Facebook の CoderDojo Japan では日本全国の活動の様子を知ることができます。</p>
86-
<p>「これまでの成り立ちを知りたい」「地元で CoderDojo を立ち上げてみたい」といった場合には <a href="http://kata.coderdojo.com/wiki/KataJapan">CoderDojo Kata</a> を参照してみてください。</p>
87-
<br />
88-
<h2>お問い合わせ</h2>
89-
<p>取材や支援などのお問い合わせについては、下記フォームからお気軽にご連絡ください :)<br />
90-
メールをご希望の場合は、担当の安川要平まで (<i>yohei@coderdojo.jp</i>) ご連絡ください。</p>
60+
<p>本家サイトである CoderDojo (英語) では世界中の活動の様子が見れます。また、Facebook の CoderDojo Japan では日本全国の活動の様子を知ることができます。</p>
61+
<p>「これまでの成り立ちを知りたい」「地元で CoderDojo を立ち上げてみたい」といった場合には <a href="http://kata.coderdojo.com/wiki/KataJapan">CoderDojo Kata</a> を参照してみてください。</p>
62+
<br />
63+
<h2 class="text-center">お問い合わせ</h2>
64+
<p>取材や支援などのお問い合わせについては、下記フォームからお気軽にご連絡ください :)<br />
65+
メールをご希望の場合は、担当の安川要平まで (<i>yohei@coderdojo.jp</i>) ご連絡ください。</p>
9166

92-
<!-- Contact Form via Wufoo -->
93-
<div id="contact"></div>
94-
<div id="wufoo-qkjthoy0qpuvg9" style="margin-top: -10px">>
95-
<a href="https://yasslab.wufoo.com/forms/qkjthoy0qpuvg9">問い合わせフォーム</a>.
96-
</div>
97-
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">HTML Forms powered by <a href="http://www.wufoo.com">Wufoo</a>.</div>
98-
<script type="text/javascript">
99-
var qkjthoy0qpuvg9;(function(d, t) {
100-
var s = d.createElement(t), options = {
101-
'userName':'yasslab',
102-
'formHash':'qkjthoy0qpuvg9',
103-
'autoResize':true,
104-
'height':'497',
105-
'async':true,
106-
'host':'wufoo.com',
107-
'header':'show',
108-
'ssl':true
109-
};
110-
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
111-
s.onload = s.onreadystatechange = function() {
112-
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
113-
try {
114-
qkjthoy0qpuvg9 = new WufooForm();qkjthoy0qpuvg9.initialize(options);qkjthoy0qpuvg9.display();
115-
} catch (e) {}
116-
};
117-
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
118-
})(document, 'script');
119-
</script>
120-
</section>
67+
<!-- Contact Form via Wufoo -->
68+
<div id="contact"></div>
69+
<div id="wufoo-qkjthoy0qpuvg9" style="margin-top: -10px">>
70+
<a href="https://yasslab.wufoo.com/forms/qkjthoy0qpuvg9">問い合わせフォーム</a>.
71+
</div>
72+
<div id="wuf-adv" style="font-family:inherit;font-size: small;color:#a7a7a7;text-align:center;display:block;">HTML Forms powered by <a href="http://www.wufoo.com">Wufoo</a>.</div>
73+
<script type="text/javascript">
74+
var qkjthoy0qpuvg9;(function(d, t) {
75+
var s = d.createElement(t), options = {
76+
'userName':'yasslab',
77+
'formHash':'qkjthoy0qpuvg9',
78+
'autoResize':true,
79+
'height':'497',
80+
'async':true,
81+
'host':'wufoo.com',
82+
'header':'show',
83+
'ssl':true
84+
};
85+
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'www.wufoo.com/scripts/embed/form.js';
86+
s.onload = s.onreadystatechange = function() {
87+
var rs = this.readyState; if (rs) if (rs != 'complete') if (rs != 'loaded') return;
88+
try {
89+
qkjthoy0qpuvg9 = new WufooForm();qkjthoy0qpuvg9.initialize(options);qkjthoy0qpuvg9.display();
90+
} catch (e) {}
91+
};
92+
var scr = d.getElementsByTagName(t)[0], par = scr.parentNode; par.insertBefore(s, scr);
93+
})(document, 'script');
94+
</script>
95+
</section>
96+
</div>
12197

122-
<footer>
123-
<h2><a href="https://www.facebook.com/groups/coderdojo.jp/">CoderDojo Japan</a> 運営グループ</h2>
124-
<p>本WEBサイトのソースコードや社団法人の定款などは <a href="https://github.com/coderdojo-japan/">GitHub</a> 上で公開されています。</p>
98+
<footer class="footer-bottom full-width text-center ">
99+
<h2><a href="https://www.facebook.com/groups/coderdojo.jp/" class="footer-link">CoderDojo Japan</a> 運営グループ</h2>
100+
<p>本WEBサイトのソースコードや社団法人の定款などは <a href="https://github.com/coderdojo-japan/" class="footer-link">GitHub</a> 上で公開されています。</p>
125101
<p>Copyright &copy; 2016 一般社団法人 CoderDojo Japan</p>
126102
</footer>
127103
<script src="js/angular.min.js"></script>

‎app/views/layouts/application.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
</head>
4141
<body>
42-
<div class="container">
42+
<div class="container-fluid">
4343
<%= yield %>
4444
<%= scrivito_body_tags %>
4545
</div>

0 commit comments

Comments
 (0)