候選人頁面各縣市的呈現

[thewayiam]

目前呈現：

網友回饋 可改進方式

想要更改此頁面呈現的話，html 檔

[s890081tonyhsu]

附圖是調整參數後用span6 + margin:0.6410255%;調整結果 （這數值是Bootstrap2給的，Responsive會在width:960~1200處變成單邊排列）

[s890081tonyhsu]

第二種呈現方式（PC和手機不同） 如果這方案可行，請給我參數去補"鄉鎮數"的部份 例如：有多少鄉鎮、有多少議員之類的資訊

[mireille09]

這是用PS做的候選人頁面

[thewayiam]

@mireille09 的應該是議員席次 下方是各區候選人人數：

county	constituency	district	count
宜蘭縣	1	宜蘭	14
宜蘭縣	2	頭城	4
宜蘭縣	3	礁溪	4
宜蘭縣	4	員山	5
宜蘭縣	5	壯圍	3
宜蘭縣	6	羅東	6
宜蘭縣	7	五結	4
宜蘭縣	8	冬山	7
宜蘭縣	9	三星	2
宜蘭縣	10	蘇澳	6
宜蘭縣	11	山地原住民	4
宜蘭縣	12	山地原住民	2
宜蘭縣	13	平地原住民	3
彰化縣	1	彰化市、花壇鄉、芬園鄉	23
彰化縣	2	鹿港鎮、福興鄉、秀水鄉	10
彰化縣	3	伸港鄉、線西鄉、和美鎮	9
彰化縣	4	大村鄉、員林鎮、永靖鄉	14
彰化縣	5	埔鹽鄉、溪湖鎮、埔心鄉	8
彰化縣	6	社頭鄉、田中鎮、二水鄉	7
彰化縣	7	田尾鄉、埤頭鄉、北斗鎮、溪州鄉	7
彰化縣	8	芳苑鄉、二林鎮、大城鄉、竹塘鄉	8
彰化縣	9	居住彰化縣各鄉鎮市之平地原住民	3
新北市	1	石門區、三芝區、淡水區、八里區	6
新北市	2	林口區、五股區、泰山區、新莊區	13
新北市	3	蘆洲區、三重區	19
新北市	4	板橋區	16
新北市	5	中和區	9
新北市	6	永和區	7
新北市	7	樹林區、鶯歌區、土城區、三峽區	21
新北市	8	新店區、深坑區、石碇區、坪林區、烏來區	8
新北市	9	平溪區、瑞芳區、雙溪區、貢寮區	6
新北市	10	金山區、萬里區、汐止區	6
新北市	11	平地原住民	6
新北市	12	山地原住民	3
新竹市	1	東區	23
新竹市	2	南區	9
新竹市	3	西區	5
新竹市	4	北區	14
新竹市	5	香山區	9
新竹市	6	居住新竹市之平地原民	3
桃園市	1	桃園市	25
桃園市	2	龜山鄉	7
桃園市	3	八德市	14
桃園市	4	蘆竹鄉	8
桃園市	5	大園鄉	3
桃園市	6	大溪復興	10
桃園市	7	中壢市	22
桃園市	8	平鎮市	19
桃園市	9	楊梅市	8
桃園市	10	龍潭鄉	9
桃園市	11	新屋鄉	2
桃園市	12	觀音鄉	4
桃園市	13	平地原住民	8
桃園市	14	山地原住民	4
臺中市	1	大甲區、大安區、外埔區	5
臺中市	2	清水區、梧棲區、沙鹿區	9
臺中市	3	龍井區、大肚區、烏日區	7
臺中市	4	后里區、豐原區	7
臺中市	5	神岡區、大雅區、潭子區	9
臺中市	6	西屯區	8
臺中市	7	南屯區	9
臺中市	8	北屯區	8
臺中市	9	北區	6
臺中市	10	中區、西區	6
臺中市	11	東區、南區	9
臺中市	12	太平區	7
臺中市	13	大里區、霧峰區	12
臺中市	14	東勢區、石岡區、新社區、和平區	3
臺中市	15	平地原住民	6
臺中市	16	山地原住民	2
臺北市	1	北投區、士林區	21
臺北市	2	內湖區、南港區	14
臺北市	3	松山區、信義區	17
臺北市	4	中山區、大同區	14
臺北市	5	中正區、萬華區	15
臺北市	6	大安區、文山區	22
臺北市	7	平地原住民	2
臺北市	8	山地原住民	3
臺南市	1	後壁、白河、東山區	3
臺南市	2	鹽水、新營、柳營區	6
臺南市	3	北門、學甲、將軍區	3
臺南市	4	下營、六甲、麻豆、官田區	5
臺南市	5	七股、佳里、西港區	5
臺南市	6	善化、安定區	3
臺南市	7	大內、山上、新化區	3
臺南市	8	楠西、南化、玉井、左鎮區	2
臺南市	9	新市、永康區	11
臺南市	10	安南區	9
臺南市	11	北區	6
臺南市	12	中西區	2
臺南市	13	安平區	2
臺南市	14	東區	9
臺南市	15	南區	6
臺南市	16	仁德、歸仁、關廟、龍崎區	7
臺南市	17	平地原住民	3
臺南市	18	山地原住民	2
花蓮縣	1	花蓮市	13
花蓮縣	2	新城鄉、秀林鄉	2
花蓮縣	3	吉安鄉、壽豐鄉、鳳林鎮、光復鄉、豐濱鄉、萬榮鄉	14
花蓮縣	4	玉里鎮、瑞穗鄉、富里鄉、卓溪鄉	6
花蓮縣	5	【花蓮市、吉安鄉、新城鄉、秀林鄉】平地原住民	5
花蓮縣	6	【壽豐鄉、鳳林鎮、光復鄉、豐濱鄉、萬榮鄉】平地原	4
花蓮縣	7	【玉里鎮、瑞穗鄉、富里鄉、卓溪鄉】平地原住民	5
花蓮縣	8	【花蓮市、吉安鄉、新城鄉、秀林鄉、壽豐鄉】山地原	3
花蓮縣	9	【鳳林鎮、光復鄉、豐濱鄉、萬榮鄉】山地原住民	2
花蓮縣	10	【玉里鎮、富里鄉、卓溪鄉】、山地原住民	4
高雄市	1	桃源區、那瑪夏區、甲仙區、六龜區、杉林區、內門區、旗山區、美濃區、茂林區	5
高雄市	2	茄定區、湖內區、路竹區、阿蓮區、田寮區	4
高雄市	3	永安區、岡山區、燕巢區、彌陀區、梓官區、橋頭區	8
高雄市	4	楠梓區、左營區	12
高雄市	5	大社區、仁武區、鳥松區、大樹區	9
高雄市	6	鼓山區、鹽埕區、旗津區	8
高雄市	7	三民區	16
高雄市	8	前金區、 新興區、苓雅區	9
高雄市	9	鳳山區	18
高雄市	10	前鎮區、小港區	11
高雄市	11	大寮區、林園區	8
高雄市	12	居住高雄市之平地原住民	2
高雄市	13	居住那瑪夏區、甲仙區、杉林區、內門區、旗山區、茄定區、湖內區、路竹區、永安區、彌陀區、梓官區、楠梓區、左營區、三民區之山地原住民	2
高雄市	14	居住桃源區、六龜區、美濃區、阿蓮區、田寮區、岡山區、燕巢區、橋頭區、鼓山區、鹽埕區、前金區、新興區之山地原住民	3
高雄市	15	居住茂林區、大社區、大樹區、仁武區、鳥松區、鳳山區、大寮區、旗津區、苓雅區、前鎮區、小港區、林園區之山地原住民	2

[mireille09]

謝謝 @thewayiam 提供完整應選人數

[kiang]

https://github.com/kiang/elections/tree/master/Console/Command/data/2014_areas

我把選舉黃頁上面各種選舉類型的資料匯出了，欄位說明如下： id - 選舉黃頁uuid url - 選舉黃頁網址 election - 選區 quota - 應選人數 quota_woman - 婦女保障名額 population - 人口 population_electors - 選舉人數量（滿 20 歲） areas - 行政區 ( id - 選舉黃頁uuid name - 名稱 ivid - https://github.com/g0v/twgeojson 的行政區編號 code - 主計處的行政區編號 url - 選舉黃頁網址 )

[mireille09]

點一下縣市會出現右邊選區 不過我只會PS不會程式

[s890081tonyhsu]

我很喜歡這樣的設計，但這設計相當於兩層的選單 網站本身的架構不是合用這種 因為縣市頁面不適合再去顯示鄉鎮的詳細資料

目前進度如圖

如果有嚴格要求要正方形的話我會再用用看

[thewayiam]

@s890081tonyhsu ++ 美美的！

兩個小建議： 字跟方塊邊界的 padding稍微加大一點點 席次改為參選人數，可能比較不會誤會

[s890081tonyhsu]

最終截圖*2

如果今天(11/13)十二點以前沒有特別的想法我叫要送request上去囉

隨手附上responsive for mobile、responsive for tablet共兩張

[thewayiam]

@s890081tonyhsu ++ @mireille09 ++

[mireille09]

@s890081tonyhsu 很美歐~ 建議方塊上下距離可以小一點. 縣市的選區與席次有沒有辦法放在一行呢? 最後是選區能否有完整市鄉鎮與選區序 有些選區含蓋鄉鎮很多...這比較麻煩一點

[s890081tonyhsu]

@mireille09

1. 結果如圖一
2. 選區和參選人數在三個一列或五個一列的時候會相互擠到
3. 你看到的名稱就是從資料庫直接拿出來的結果（參見圖二，排的不整齊的原因是資料長度不一，仍在想方法）

圖一

圖二

[mireille09]

@s890081tonyhsu 了解 謝謝你 速度真快 選區字太多能不能把框框也變大呢? 資料庫的選區可以直接修改嗎? 可以的話我就去弄

[s890081tonyhsu]

或許是不錯的想法，但瀏覽器寬度是未知數 所以標題會不會從一行變成兩行這點我也不知道 就算可以預估得到，如果遇到下面這筆資料就會出包

A, B, C, D, E：單欄、F, G, H：雙欄

排版表格

A	B	C	D
E	F	F
G	G	H	H

先謝謝你的想法贊助 三欄和五欄的高度我好像有方法可解（剛翻文件）

[mireille09]

@s890081tonyhsu+ 正方形或長方形(俗稱黃金比例)應該都會很美 接下來看看顏色能否小變化, 真不好意思一直麻煩你~ 選區的問題我在想想看, 有些選區鄉鎮超級多, 字也會超多

[s890081tonyhsu]

顏色變化請給我色單（網址：http://paletton.com/） 在拉出適合的色單時，複製網址給我（有uid的） 如果要弄新的色單請記得清除uid在重連即可

顏色的部份我真的不熟悉，如果可以還請你多指教ww

[mireille09]

http://paletton.com/#uid=33i0u0ko0K+dGUmjjPFsPFTAyvi 我用PS顏色代碼輸入的, 三角形比較活潑, 四角型也不錯, 有win8感 顏色只是要讓呈現出來的結果不要太單調而已, 我也是新手. 文字是用白色的話, 基本上不要用太亮的顏色就好了 辛苦了

[s890081tonyhsu]

@thewayiam 這Issue結果我已經弄成 #42 ，但因為操作不當所以close掉了，有空請幫我看一下

[thewayiam]

收到，我以為你想要再改一下XD

[thewayiam]

Merged 雖然很漂亮，但感覺還是有點難找到自己的縣市

[mireille09]

@thewayiam 很漂亮喔~ 我會建議顏色可能用兩個相似色系就可以了, 上面那種是淺一點的, 下面那種是深一點的, 不好意思我比較龜毛一點, 縣市文字的陰影顏色可以深一點嗎? 或者字大一點 縣市可不可以重新排列順序呢? 直轄市、台灣省北中南東這樣排下來

[s890081tonyhsu]

我整理一下

顏色可能用兩個相似色系就可以了, 上面那種是淺一點的, 下面那種是深一點的

這一點恐怕還要再討論，因為這是動態排列的（mobile一行一個、tablet一行三個、desktop一行五個）

縣市文字的陰影顏色可以深一點嗎? 或者字大一點

如果可以，可以給數據是最快解法

大小單位給px
陰影請給顏色、不透明度、角度、間距、尺寸

縣市可不可以重新排列順序呢? 直轄市、台灣省北中南東這樣排下來

這點是資料提供方的問題，如果他們有排列過的話應該可以

[mireille09]

微軟正黑體 字型大小24 陰影- 黑色(色彩增值), 不透明75%, 角度 120, 間距 2像素, 尺寸 5像素

基本上兩種顏色看起來叫清爽, 一行3個或5個就是交錯也是耐看的 我是覺得色相不要對比太大這樣

[thewayiam]

縣市排列順序問題 目前縣市越來越完整 之後我可以試著直接寫死在 html，不用再從 db輸出

[s890081tonyhsu]

如果這東西要Open到國外的話，還是幫縣市建立個ID，用ID排列吧....

[s890081tonyhsu]

效果如圖 網頁沒有色彩增值，所以黑色就黑色吧

[mireille09]

@s890081tonyhsu ++ 很美喔就是這感覺~~ 我注意到選區跟參選人數列出來是排在中間那行 不知道能不能放在下面那一行呢?

[thewayiam]

@s890081tonyhsu : 兩層都用 bluegreen哦 @mireille09 : 空行感覺如下，目前是空一行，這樣的感覺OK嗎？不知道為什麼 #00CCCC變得比較深？?

[mireille09]

@thewayiam ++ 不錯喔~ 可以空兩行看看嗎 色表是繪圖軟體的, 跟網頁計算的可能會有不同吧 陰影的不透明度可以調成50%看看嗎? 網頁顏色可以試試看用這個調 http://www.huecode.com/ ex: 輸入00cccc, 再調亮一點, 會變成02e8e8之類的東西

[thewayiam]

字的陰影改50% 兩色塊目前分別是#02E8E8, #00CCCC @mireille09 : 我美感不好，但感覺有比較漂亮 :)

[mireille09]

@thewayiam +++ 水喔

[mireille09]

那個..選區跟參選人數也可以給陰影嗎?不透明30%就好. 或者字大一點這樣

[thewayiam]

如 https://github.com/g0v/councilor-voter-guide/issues/96 提到的問題 不知道如何讓數量資訊部分靠底部，又不影響目前整個方塊都可按的功能 程式碼所在處

[mireille09]

我的建議-把選區跟參選人數兩行取消掉 因為點進去會看到選區 參選人跟應選人可以併到標題後面 看是要文字就好還是怎樣 大概就是這樣吧... 色塊上面的字型大小改成16看看

試著把 #02E8E8換成深一點(ex #1bd6d6)也許就不那麼刺眼了 不知道把背景做灰的(ex #d8dada、#e3e3e3)如何?

[s890081tonyhsu]

看一下程式碼，大概了解是怎回事了....

<div>&nbsp;</div>
<br>
<br> <!--這兩行相當於用Enter排版-->

選區和參選人數要保留--可以，我CSS做得到；要挪到子頁面，也可以，只是資料要拿得到

至於粗體字我覺得是排版問題，理論上可以不要卡到位的說

[s890081tonyhsu]

選區與參選人數保留調整（鄉鎮）

[s890081tonyhsu]

剛剛看到議案頁面，是不視野需要做類似的變更 議員投票指南 -- 找議案

[thewayiam]

是的，HTML位置如下 找議員HTML、找議案HTML、找表決HTML

[mireille09]

顏色參考-提供紫色、藍色、橘黃三組 色碼已用http://www.huecode.com/ 試過，顯色ok，可做調整

[s890081tonyhsu]

其他頁面依序配色 找議員--藍色pair, 找議案--紫色pair, 找表決--橘色pair

[mireille09]

那個..我不知道要在哪裡問.現在的頁面有修改了 但是有些縣市字體仍是白色的 可以改成黑色嗎?謝謝

[s890081tonyhsu]

縣市的字體會白色是因為連結的一系列效果都沒有更正，所以就只有一般狀態下是黑色

[mireille09]

放了縣市政府logo很失焦.....

[s890081tonyhsu]

你是指首頁縣市logo嗎？ 我是一直在想到底哪裡奇怪，如果可以請做解釋...

[mireille09]

舉例而言報紙頭版會有一個頭條，跟其他新聞 他們會排出最重要的一個焦點，換言之頭條只會有一個 今天改這樣看似全部都是重點，但實際上卻變成沒有重點了 設計的細節在於每個設計只有一點點、小小的，等主題出來就可以襯托

我的建議是... 點進去的頁面顯示縣市府Logo不變 首頁的建議: 1.Logo拿掉 2.滑鼠移到上面才顯示Logo 3.Logo刷成黑灰白, 不至於看起來像大雜燴

設計到後來當東西越來越多的時候 less is more, 少即是多

[mireille09]

然後我個人是有個建議... 這個網站在選舉結束之後可以持續更新... 往後像是某南部直轄市老是被砍預算這種事可以列頭條這樣... 只是會很麻煩!!!

[s890081tonyhsu]

縣市預算的部份我覺得要到其他專案發展了，因為這專案的核心就只是選舉查閱工具 不排斥裡頭的預算整理，但如果將這功能抽出來再做或許會更好 這就要看接下來有沒有人要開始新的專案了